Search code examples
javascriptjqueryfullcalendarfullcalendar-3

Fullcalendar refresh events from local variable


I am using FullCalendar in my POC project. What I have are two data-grids (using jTable). I want to put some rows there, click 'Send Request' and then JSON is being created. It is being send to my backend application, then it is processed and response (still in JSON) is being returned. My AJAX-success-handler takes this response and transform it to JavaScript object in order to be put into calendar.

As long as I've had construction like this:

$.post( {
    // options cut for clean output
    success: function(data, textStatus, jqXHR) {
        var eventsToPut = [];

        $.each(data.taskList, function(k, v)  {
            // OBJECT is created when processing response
            eventsToPut.push (OBJECT );
        });

        $('#calendar').fullCalendar({   
             events: eventsToPut,
             // config of calendar cut
        });           
    }                               
});

It works fine. The response is being rendered and events show up on the calendar. The problem is when I change data in my data-grids and re-send request to the backend. The response is valid but the calendar is not refreshing the events.

So I've decided to extract creation of the calendar with EMPTY events to the jQuery.ready() section and try to refresh/update calendar with events when they come. So far I've tried in my 'success' handler:

 $('#calendar').fullCalendar( 'refetchEvents' );  //It should work with feeds but I've tried anyway
 $('#calendar').fullCalendar({ events: eventsToPut});
 $('#calendar').fullCalendar( 'updateEvents', eventsToPut );

However calendar does not refresh the data. Can anyone help me to make calendar refresh with new data?


Solution

  • First of all, remove all the events from the calendar by using removeEvents

    $('#calendar').fullCalendar('removeEvents', function () { return true; });
    

    then, you can use addEventSource to add new events

    var eventsToPut = []; 
    
    $.each(data.taskList, function(k, v)  {
        // OBJECT is created when processing response
        eventsToPut.push( OBJECT );
    });
    
    $('#calendar').fullCalendar('addEventSource', eventsToPut, true);