Jquery Full Calendar json event source syntax

Question

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

{"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.

1. What is the proper way to get the events from a json url
2. How do I go about generating an id for every event created?

Answer 1

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:

[
  {
    "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"
  }
]

Answer 2

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

• 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.

Example output from the JSON script:

[
    "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"
    }
]

Answer 3

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:

[
    {
        "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"
    }
]

Answer 4

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.

  $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...

  ]

});