javascript - fullcalendar event rendering performance issue - Stack Overflow

admin管理员组

文章数量:1287569

So, basically all my events(there's min. 360 of them) have team1 vs. team2 or - vs. team2 or team1 vs. - placeholders. 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 eventRender or eventAfterRender event, and its behavior is exactly like the for 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 eventClick I've called $('#myCalendar').fullcalendar('updateEvent',event) and I think there is a bug, because it automatically goes to the eventAfterRender or the eventRender, iterating over the whole events collection again.

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

Does anyone have any advice on this subject?

So, basically all my events(there's min. 360 of them) have team1 vs. team2 or - vs. team2 or team1 vs. - placeholders. 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 eventRender or eventAfterRender event, and its behavior is exactly like the for 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 eventClick I've called $('#myCalendar').fullcalendar('updateEvent',event) and I think there is a bug, because it automatically goes to the eventAfterRender or the eventRender, iterating over the whole events collection again.

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

Does anyone have any advice on this subject?

• javascript
• jquery
• performance
• fullcalendar
• rendering

Share Improve this question Follow asked May 26, 2015 at 7:23 H3NDRXH3NDRX 15233 silver badges1414 bronze badges 1

• There is an possibility that you might be using wrong function. What is your requirement can you elaborate that – valar morghulis Commented May 26, 2015 at 8:37

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Fullcalendar now supports the renderEvents method: https://fullcalendar.io/docs/renderEvents.

Simply build your events list and send them all at once:

$("#calendar").fullCalendar('renderEvents', events, true);

I know this is an old question, but i solved the same performance problem in v5 of the fullcalendar with this configuration option:
https://fullcalendar.io/docs/rerenderDelay
It basically adds a delay after each operation that would trigger a render event. if the framework detects another operation within that delay, it renders these events in one operation and thereby increases performance.

setting the value to 1 (so 1 millisecond delay) did the trick for me. I simply added it to the configuration in my angular ponent:

  calendarOptions: CalendarOptions = {
    ...,
    rerenderDelay: 1,
  }

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) {
        normalizeEvent(events[i]);
        if (!events[i].source) {
            if (stick) {
                stickySource.events.push(events[i]);
                events[i].source = stickySource;
            }
            cache.push(events[i]);
        }
    }

    reportEvents(cache);
}

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.

I have changed

$("#calendar").fullCalendar('renderEvent', eventData1, true);

to

$("#calendar").fullCalendar('addEventSource', eventData1, true);

and that worked for me. I have read the issue on several related website and as per their suggestion I have done this.

The main difference between renderEvent and addEventSource is that the first one tries to interact with calendar when even a single event created which take much time because of regular callback function, and the second one sends a bucket of JSON events to calendar which require only single callback function which improve the performance and take less time.

本文标签： javascriptfullcalendar event rendering performance issueStack Overflow