fullcalendar js: fetching more events with ajax

Question

I'm using fullcalendar, how can I fetch more events from same server side, multiple urls? The initial one works, I just want to add additional events when they arrive(ajax).

Answer 1

You could use Ajax to get the data and then add dynamically the new source

$.ajax({
  url: "test.html",
  success: function(data){
       var source = { events: [
                            {
                                title: data.getTitle(),
                                start: new Date(year, month, day)
                            }
                ]};
                $('#calendar').fullCalendar( 'addEventSource', source );
  }
});

Answer 2

If each and every time you are using a different URL, then you can simply use addEventSource with the new URL.

If you are attempting to use the same URL, you can get all events (old and new) using refetchEvents.

You can also get the JSON and create the event as a client event using renderEvent. The latter is the most "ajax-y" of the options. In this case have your source return the JSON that represents the events, iterate through the array of new events, and call renderEvent on it.

// this call goes in a poll or happens when the something should trigger a
// fetching of new events
$.ajax({
  url: "path/to/event/source",
  success: function(data){
      $.each(data, function(index, event)
                $('#calendar').fullCalendar('renderEvent', event);
      );
  }
});

Answer 3

The ajax call done can also insert in the calendar code

      $.ajax({ 
            url: url, 
            type: 'GET', 
            data: { }, 
            error: function() {
                alert('there was an error while fetching events!');
            } 
        }).done(function (doc) { 
                var event = Array();
                    $.each(doc, function(i, entry) 
                        event.push({title: entry.title, start: entry.start});
                    }); 
                 $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: '2014-06-12',
                    editable: true,
                    events: event
                });

     });