在上班时间上加快fullcalendar.io

Question

I have a shift roster generated using fullcalendar.io.

I'm following and expanding on this tutorial: How can I create an event based on pattern for calendar?

I have events spanned over a time period of 50 years.

This makes the whole calendar laggy and heavy rather than lightweight. Prev/Next buttons are slow. Especially, for dayClick callback when the dates are filtered over all of the events created weekly over a period of 50 years, it takes a couple of seconds for the event to get executed.

I think its the logic behind the creation. When I lessen the period to generate the events, the whole process gets faster.

here is for the full illustration: https://codepen.io/gunblaze/pen/OZKBvE .

the day click is still the slowest due to its filtering, i guess:

..
dayClick: function(date, allDay, jsEvent, view) {
            $('#calendar').fullCalendar('clientEvents', function(event) {
                // match the event date with clicked date if true render clicked date events
                if(event.rendering == 'background'){
                    if (moment(date).format('YYYY-MM-DD') == event.start.format('YYYY-MM-DD')) {
            // do your stuff here
            $("#instructions").html(moment(date).format('YYYY-MM-DD')+': on ' +event.title+' shift.') 
                    }                   
                }
            });
}
..

Answer 1

You're front-loading all your data; with 50 years of data, no way to prevent that from being slow.

If you have a server component you might want to think about serving up the data in smaller chunks. The documentation describes how to do this, but here's a quick sketch:

$('#calendar').fullCalendar({
  events: '/myfeed.php'
});

This would result in your server receiving a query string like this:

/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381

Then you can filter your calendar data on the server side to only return the data between start and end . This will generally be much more efficient if you can do it as part of your SQL query (assuming you're using a SQL database) as opposed to trying to filter in a javascript array.