Jquery Full Calendar json event source syntax

fullcalendar load events json
jquery fullcalendar events
fullcalendar events: function
fullcalendar failure parsing json
fullcalendar json events not showing
fetch events full calendar
django full calendar
fullcalendar example

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?

events (as a json feed), A URL of a JSON feed that the calendar will fetch Event Objects from. Here is the same example, but using the single-source events option instead:. A URL of a JSON feed that the calendar will fetch Event Objects from. FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters.

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

events (as a json feed), FullCalendar will determine the date-range it needs events for and will pass that is an example of an ISO8601 date string for start and end dates in a JSON feed​: fullCalendar({ eventSources: [ // your event source { url: '/myfeed.php', // use the You can also specify any of the jQuery $.ajax options within the same object! These docs are for an old release. Info on upgrading to v4. Visiting the URL of a JSON feed is one of the ways FullCalendar fetches Event Objects. This action occurs when the user clicks prev/next or changes calendar views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters.

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

Event Source Object, It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed. Event Objects can have “options”  If you looking for Web tutorial for How to use FullCalender.js plugin with PHP dynamic website for scheduling our meeting or event on particular date and time. So in this post we have discuss How to Integrate Jquery FullCalender Plugin with PHP server side script and Mysql database table.

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

  ]

});

events (as a json feed), A URL of a JSON feed that the calendar will fetch Event Objects from. You can also specify any of the jQuery $.ajax options within the same object! This allows Here is the same example, but using the single-source events option instead:. An array of Event Objects that will be displayed on the calendar. events (as a json feed) A URL of a JSON feed that the calendar will fetch Event Objects from.

eventSources, A way to specify multiple event sources. This option is used instead of the events option. Here is an example calendar that displays two JSON feeds:. A way to specify multiple event sources. This option is used instead of the events option.. You can put any number of event arrays, functions, JSON feed URLs, or full-out Event Source Objects into the eventSources array.

events (as a function), However, if you have the choice, JSON is a better idea because you can just specify a feed URL. Extended Form. You can specify Event Source options. This often  This demo shows how to have a jQuery UI modal dialog on event-click when using FullCalendar. Also in the example, it is shown how to use a JSON feed as the event source. The demo uses jQuery, jQuery UI, FullCalendar, and Moment.js. I also have a demo using Bootstrap Modal.

Event Object, It is exposed in various places of the API such as getEventById and provides methods for dynamic manipulation. For example, an event with the end of 2018​-09-03 will appear to span A reference to the Event Source this event came from. An “event source” is anything that provides FullCalendar with data about events. It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed. Event Objects can have “options” associated with them. However, before you can start specifying options, you must write an Event Object

Comments
  • thanks, I had the wrong syntax and this was perfect. You da man.
  • The accepted answer is valid JSON data but using events does not work. Perhaps it would work with eventSources. The formatted solution above does work.