Tomislav Tomislav - 1 year ago 156
jQuery Question

fullcalendar event rendering performance issue

So, basically all my events(there's min. 360 of them) have

team1 vs. team2
- vs. team2
team1 vs. -
And on the initial render events change color depending on whether the event has one or two teams.
Orange color for the one team , and green for the two teams. Also, the event changes color on click.

But mostly, I'm interested in increasing performance with rendering events.

Rendering performance is going really bad in fullCalendar, and I couldn't find any solution to this problem.

So here's my code:

eventRender: function (event, element) {
$(element).append((event.teams[0] != null ? event.teams[0] : '-') + '</br> vs. </br>' + (event.teams[1] != null ? event.teams[1] : '-'));
if (event.teams.length === 1) {
$(element).css('background', 'orange');
else if (event.teams.length > 1) {
$(element).css('background', 'green');

My main issue is that when I click on event to change its color, the script automatically goes to the
event, and its behavior is exactly like the
statement - it iterates over events and then it does the stuff that I want to do with the individual event, but only when the loop lands on the clicked event.

Also, in the
I've called
and I think there is a bug, because it automatically goes to the
or the
, iterating over the whole events collection again.

Even tough
parameter should instruct fullCalendar to update/render only the specific event.

Does anyone have any advice on this subject?

Answer Source

In fullcalendars source-code (at least in my version of it) there is the renderEvent-handler, that calls reportEvents -function which is the bottleneck of performance. I worked my way around this issue, by adding handling of mass-rendering events to the source-code.

I wrote a short function:

function massRenderEvents(events, stick) {
    var i;

    for (i = 0; i < events.length; i += 1) {
        if (!events[i].source) {
            if (stick) {
                events[i].source = stickySource;


Under "EventManager" -function, and added it to EventManagers exports, like:

t.massRenderEvents = massRenderEvents;

Now, for every batch of rendered events, the heavy and slow reportEvents is called just once. Note, that massRenderEvents -function is very similar to the original renderEvent -function.