Jquery完整日历json事件源语法

时间:2022-08-24 22:08:47

I'm trying to use full calendar to load events from a json source. The json is from a URL like a feed, "mysite.com/getEvents" (which returns a json event object). Right now it returns an object

我正在尝试使用完整日历来加载来自json源的事件。 json来自像feed这样的URL,“mysite.com/getEvents”(返回一个json事件对象)。现在它返回一个对象

{"allDay":false,"end":1325577600,"start":1325577600}

I tried

$('#calendar').fullCalendar({
    events: 'mysite.com/getEvents'
});

But nothing happens. I know my json is missing the title and the id. So we have 2 questions.

但没有任何反应。我知道我的json缺少标题和id。所以我们有2个问题。

  1. What is the proper way to get the events from a json url
  2. 从json url获取事件的正确方法是什么

  3. How do I go about generating an id for every event created?
  4. 如何为每个创建的事件生成id?

4 个解决方案

#1


16  

You should try forming the JSON so it has all the required fields. For example, on my project the following is sufficient:

您应该尝试形成JSON,以便它具有所有必需的字段。例如,在我的项目中,以下内容就足够了:

  • id
  • title
  • start
  • end
  • allDay

I think the ID only has to be unique for that instance of the JSON feed, so you could just have a counter incrementing in the server-side script that generates the JSON.

我认为ID只需要对于JSON提要的实例是唯一的,因此您可以在生成JSON的服务器端脚本中使用计数器递增。

Example output from the JSON script:

JSON脚本的示例输出:

[
    "0",
    {
        "allDay": "",
        "title": "Test event",
        "id": "821",
        "end": "2011-06-06 14:00:00",
        "start": "2011-06-06 06:00:00"
    },
    "1",
    {
        "allDay": "",
        "title": "Test event 2",
        "id": "822",
        "end": "2011-06-10 21:00:00",
        "start": "2011-06-10 16:00:00"
    }
]

#2


17  

When I use the syntax in the accepted answer, I get four events on the calendar, not two. The two extra are bizarrely titled "12:44". On a hunch, I removed the "0" and "1" lines and now it works perfectly:

当我在接受的答案中使用语法时,我在日历上获得了四个事件,而不是两个。这两个额外的名字叫做“12:44”。在预感中,我删除了“0”和“1”行,现在它完美地工作:

[
  {
    "title": "Ceramics",
    "id": "821",
    "start": "2014-11-13 09:00:00",
    "end": "2014-11-13 10:30:00"
  },
  {
    "title": "Zippy",
    "id": "822",
    "start": "2014-11-13 10:00:00",
    "end": "2014-11-13 11:30:00"
  }
]

#3


4  

I know this is an old post but others may be looking for this...

我知道这是一个老帖子,但其他人可能正在寻找这个......

You need to have brackets around your json response, it seems to be expecting an array of objects:

你需要在你的json响应周围有括号,它似乎期待一个对象数组:

[
    {
        "title":"foo1",
        "id":"123",
        "start":"2016-02-12T10:30:00",
        "end":"2016-02-12T12:30:00"
    },

    {
        "title":"foo2",
        "id":"456",
        "start":"2016-02-14T10:30:00",
        "end":"2016-02-14T12:30:00"
    }
]

#4


0  

I tried fullcalendar with cakephp 3, I had similar issues. if you are fetching the events through ajax eventsource. then you'll need to serialise the array before sending it to you ajax call.

我尝试使用cakephp 3完整日历,我有类似的问题。如果您通过ajax eventsource获取事件。然后你需要序列化数组,然后再发送给你ajax调用。

  $this->set(array(
    'events' =>  $this->xyzCalls->getAllEvents(),
    '_serialize' => 'events'
));

so it will output correctly as below:

所以它将正确输出如下:

 [
    {
        "id": 22,
        "title": "event1",
        "start": "2018-09-13T13:30:00+00:00",
        "end": "2018-09-13T14:00:00+00:00"
    }
]

Then on full calendar, make your event sources call:

然后在完整日历上,调用您的事件来源:

$('#calendar').fullCalendar({

  eventSources: [

    // your event source
    {
      url: '/myfeed.php',
      type: 'POST',
      data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
      },
      error: function() {
        alert('there was an error while fetching events!');
      },
      color: 'yellow',   // a non-ajax option
      textColor: 'black' // a non-ajax option
    }

    // any other sources...

  ]

});

#1


16  

You should try forming the JSON so it has all the required fields. For example, on my project the following is sufficient:

您应该尝试形成JSON,以便它具有所有必需的字段。例如,在我的项目中,以下内容就足够了:

  • id
  • title
  • start
  • end
  • allDay

I think the ID only has to be unique for that instance of the JSON feed, so you could just have a counter incrementing in the server-side script that generates the JSON.

我认为ID只需要对于JSON提要的实例是唯一的,因此您可以在生成JSON的服务器端脚本中使用计数器递增。

Example output from the JSON script:

JSON脚本的示例输出:

[
    "0",
    {
        "allDay": "",
        "title": "Test event",
        "id": "821",
        "end": "2011-06-06 14:00:00",
        "start": "2011-06-06 06:00:00"
    },
    "1",
    {
        "allDay": "",
        "title": "Test event 2",
        "id": "822",
        "end": "2011-06-10 21:00:00",
        "start": "2011-06-10 16:00:00"
    }
]

#2


17  

When I use the syntax in the accepted answer, I get four events on the calendar, not two. The two extra are bizarrely titled "12:44". On a hunch, I removed the "0" and "1" lines and now it works perfectly:

当我在接受的答案中使用语法时,我在日历上获得了四个事件,而不是两个。这两个额外的名字叫做“12:44”。在预感中,我删除了“0”和“1”行,现在它完美地工作:

[
  {
    "title": "Ceramics",
    "id": "821",
    "start": "2014-11-13 09:00:00",
    "end": "2014-11-13 10:30:00"
  },
  {
    "title": "Zippy",
    "id": "822",
    "start": "2014-11-13 10:00:00",
    "end": "2014-11-13 11:30:00"
  }
]

#3


4  

I know this is an old post but others may be looking for this...

我知道这是一个老帖子,但其他人可能正在寻找这个......

You need to have brackets around your json response, it seems to be expecting an array of objects:

你需要在你的json响应周围有括号,它似乎期待一个对象数组:

[
    {
        "title":"foo1",
        "id":"123",
        "start":"2016-02-12T10:30:00",
        "end":"2016-02-12T12:30:00"
    },

    {
        "title":"foo2",
        "id":"456",
        "start":"2016-02-14T10:30:00",
        "end":"2016-02-14T12:30:00"
    }
]

#4


0  

I tried fullcalendar with cakephp 3, I had similar issues. if you are fetching the events through ajax eventsource. then you'll need to serialise the array before sending it to you ajax call.

我尝试使用cakephp 3完整日历,我有类似的问题。如果您通过ajax eventsource获取事件。然后你需要序列化数组,然后再发送给你ajax调用。

  $this->set(array(
    'events' =>  $this->xyzCalls->getAllEvents(),
    '_serialize' => 'events'
));

so it will output correctly as below:

所以它将正确输出如下:

 [
    {
        "id": 22,
        "title": "event1",
        "start": "2018-09-13T13:30:00+00:00",
        "end": "2018-09-13T14:00:00+00:00"
    }
]

Then on full calendar, make your event sources call:

然后在完整日历上,调用您的事件来源:

$('#calendar').fullCalendar({

  eventSources: [

    // your event source
    {
      url: '/myfeed.php',
      type: 'POST',
      data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
      },
      error: function() {
        alert('there was an error while fetching events!');
      },
      color: 'yellow',   // a non-ajax option
      textColor: 'black' // a non-ajax option
    }

    // any other sources...

  ]

});