Question

I have the following code to utilize the jquery FullCalendar plugin:

$(function () {
    var dueHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetDueHotfixEvents', color: 'red' };
    var releasedHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedHotfixEvents', color: 'green' };
    var releasedVersionEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedVersionEvents', color: 'green' };
    var pendingVersionEvents = { url: baseUrl + '/Misc/Calendar/GetPendingReleaseEvents', color: 'blue' };
    var dueTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksDueEvents', color: 'red' };
    var completedTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksCompletedEvents', color: 'blue' };

    $('#calendar').fullCalendar({
        //theme: true,
        eventSources:
        [
            dueHotfixEvents,
            releasedHotfixEvents,
            releasedVersionEvents,
            pendingVersionEvents,
            dueTaskEvents,
            completedTaskEvents
        ]
    });
});

These retrieve all the dates in the system at once. However, whenever I change what month I am on, it seems to re-fetch all the data from the event sources. I do not want this, as it already has all the data it requires.

The documentation states that the lazyFetching option being set to true should fix this, but it’s supposedly set to true by default, but regardless doing lazyFetching: true, or lazyFetching: false, does not seem to change this.

How can I stop FullCalendar from making so many ajax requests?

Answer 1

well, I was thinking about smth like that before and I came up with two solutions. You could either change some methods in fullcalendar plugin itself (its not that hard, I implemented some new stuff, like capturing dblclick events on days/slots/events etc, but I wouldnt suggest this solution to do any good if you plan using further fc updates) or use some sort of “workaround”.
This workaround is based on getting event arrays before you initialize fullcalendar, so you can init fc with evensources defined as arrays of events, which will cause fc not to request any data from server by itself (even if it does refetch all eventsources, it will still fetch only those static arrays). You can also connect this approach with capturing ‘viewDisplay’ callback, check inside whether you already have those arrays loading and if not, get them from server and add them via addEventSource method (you may need some simple global flag outside fc to store state, whether events are already loaded or not).
It would look smth like this:

$(function () {
    var dueHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetDueHotfixEvents', color: 'red' };
    var releasedHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedHotfixEvents', color: 'green' };
    var releasedVersionEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedVersionEvents', color: 'green' };
    var pendingVersionEvents = { url: baseUrl + '/Misc/Calendar/GetPendingReleaseEvents', color: 'blue' };
    var dueTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksDueEvents', color: 'red' };
    var completedTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksCompletedEvents', color: 'blue' };
    var eventsLoaded = false;

    $('#calendar').fullCalendar({
        //theme: true,
        eventSources:[],
        'viewDisplay': function(v){
            if(!eventsLoaded){
                var $fcEl = $(this);
                $.ajax({
                    url:dueHotfixEvents.url,
                    type:"get",
                    dataType:"json",
                    success:function(response){
                        if(response.length > 0) $fcEl.fullCalendar('addEventSource', {events:response,color:dueHotfixEvents.color});
                    }
                });
                .
                .  //do same for every source defined
                .
                eventsLoaded=true;
            }
        }
    });
});

Hope this helps you (I guess there are better solutions but this one seems to be simple and easy enough to implement pretty fast + its really easy to include a lot of options to controll when its appropriate to reload events + it actually solves annoying double events I keep getting when creating events on the fly when there are defined online sources).