Fullcalendar rendering 2000 events

1
votes

I've a fullcalendar script running but I need to render about 2000 to 3000 events.

I already read this post and I've done that (Only load the events between start and end date). Then I've made the JSON call so that Javascript only have to send it to fullcalender. Also, I don't use renderEvent.

But the rendering of the events is still very slow. The ajax call takes about 400 milliseconds after the successful call the browser is taking about 5 to 10 seconds to render all the events.

Where else can I gain speed?

2
javascriptjqueryperformancefullcalendar
Hi :), did you solve this issue? – Gal Koren
I made costum elements with just a div with a text: <div id="blabla">Label</div> Then on click on the calender the parent of the elements, i fetch the click check if the id is correct and then do stuff. – Mad

2 Answers

0
votes

Let's assume that data is retrieved within a few hundreds of milliseconds, there's no bottleneck with the connection. In my experience, if you have page with more than 4000 DOM elements, the browser will slow down significantly due to browser rendering engine is incapable of rendering that large amount of elements. So with 2000 to 3000 events times it by 3 or more depends how you structure the html for each event like DIV, SPAN, BR... that would be al least 12000 DOM elements on the page.

The solution is segmenting the data. Break it down to smaller pieces, and display events when necessary.

0
votes

You can limit the number of events rendered for each day by using eventLimit