jQuery FullCalendar Fetch Event Optimization

Question

I was wondering if someone could give me some pointers to help optimize my jQuery Full Calendar Code. The issue i'm running into is when I fetch a lot of events through AJAX (> 25), the browser stalls and becomes unresponsive usually resulting in a message to the user to abort the script. I'm trying to avoid this error, and I was wondering if there was something I could do in my function to improve the loading time.

Here is a copy of the function I'm running:

//Load the Business Unit Calendar Events
function ajaxBUEvents(start, end){
    //Loop through the selected checked calendars
    $(selectBUCalendars()).each(function(i, cal){
        $.ajax({
            type: 'POST',
            data: {'startDate': start, 'endDate': end, 'buCals[]': cal}, 
            url: '<?= site_url('AJAX/calendar_ajax/get_cal_events'); ?>', 
            dataType: 'json',
            async: false,
            beforeSend: function(){
                $('#loading-dialog').dialog({minHeight: 100, width: 250}).dialog('open');
                $('#loading-dialog p').text('Loading '+cal+' Calendar Events');
            }, 
            success: function(calevents){
                $.each(calevents, function(i, calevent){
                    $('#calendar').fullCalendar('renderEvent', calevent, true); 
                }); 
            }
        });
    }); 
    $('#loading-dialog').dialog('close');
}

And here is a sample of the JSON that is returned, this is only one event. Sometimes there can be 50+ events returned:

[{"id":4377,"title":"BWR - Lighting Affiliates Dinner - Actualized","start":1259874000,"end":1259888400,"className":"BWR Actualized","allDay":false,"editable":false}]

Thank you for the help!

Answer 1

The trick is to use addEventSource instead of renderEvent. Because with renderEvent your whole calendar is redrawn for every single event you add. While addEventSource adds all events from the source you provide and then does a single redraw of the calendar.

success: function(calevents){
    $('#calendar').fullCalendar('addEventSource', calevents); 
}

---

I even made two demopages for you, so you can check the difference in performance.

The slow version adds 50 events via renderEvent (note how whole the calendar is redrawn for every event)

http://jsbin.com/ewuka

The fast version adds 50 events via addEventSource (note how the calendar only gets redrawn for once)

http://jsbin.com/udode