Fullcalendar refresh events from local variable

Question

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?

How about using [`addEventSource`](https://fullcalendar.io/docs/event_data/addEventSource/) in your success callback? With the new array of events. You'd probably have to also remove previous events first. — Don't Panic, Oct 12 '17 at 14:31

score 2 · Accepted Answer · answered Oct 12 '17 at 14:51

2

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);

answered Oct 12 '17 at 14:51

Adeel

2,901
7
24
34

It works but the problem is that previous tasks are still there (eg. if I just edit existing one) the returned response is being rendered again. – Chlebik Oct 13 '17 at 07:40
I've fixed it adding: $('#calendar').fullCalendar('removeEventSources'); – Chlebik Oct 13 '17 at 07:46

Fullcalendar refresh events from local variable

1 Answers1