Enable one request per week (or per chunk) in month view

Question

An application I've inherited maintenance of is timing out when attempting to load the events JSON stream for a Fullcalendar render.

I'm hoping that I'll get approval to throw some more computing resources at the problem to hopefully resolve it, but other than that I'm having a hard time figuring out how to resolve this problem.

One idea I had was to split the data request up in to smaller pieces, requesting 1 week of data (instead of 1 month) at a time.

This seems like it should be doable, but I can't figure out how to catch the timeframe change, split it into smaller chunks and then make multiple requests out of it instead of just one.

Answer 1

It seems that you are trying to get around the main issue which is why is it timing out? Not knowing many details, it could be as simple as a database index or some other process on the server is consuming to many resources. I suggest you profile your database and framework / server to resolve the issue.

That said, you can do two things:

1. Disable month view to force FullCalendar to use agendaWeek or agendaDay. Something like this:

   $('#calendar').fullCalendar({
       header: {
           left: 'prev,next',
           center: 'title',
           right: 'agendaWeek,agendaDay'
       },
       defaultView: 'agendaWeek'
   });
   

   See an example.

2. If you really need month view, you can use events as a function. You'll have to calculate the start and end days for each week of the month and then call the callback. Something like this:

   $('#calendar').fullCalendar({
       events: function(start, end, timezone, callback) {
           // do this in chunks only when view is month
           if ($("#calendar").fullCalendar( 'getView' ).name == 'month') {
               // You'll need to get the start and end day of each week.
               // The parameters `start` amd `end` relate to the first day of
               // the month and the last day of the month.
   
               // You should get an array of objects, like this
               var weeks = [
                   {start: '2014-09-28', end: '2014-10-04'},
                   {start: '2014-10-05', end: '2014-10-11'},
                   {start: '2014-10-12', end: '2014-10-18'},
                   {start: '2014-10-19', end: '2014-10-25'},
                   {start: '2014-10-26', end: '2014-11-01'}
               ];
   
               // When you have that:
               for(var i in weeks) {
                   getEvents(weeks[i].start, weeks[i].end, callback);
               }
           }
           // if its another view, get all events at once
           else {
               getEvents(start, end, callback);
           }
       }
   });
   
   function getEvents(start, end, callback) {
       $.ajax({
           url: 'events',
           dataType: 'json',
           async: false,
           data: {
               start: start,
               end: end
           },
           success: function(events) {
               callback(events);
           }
       });
   }
   

   In order to calculate the week start and end, you can have a look at this question: get next week start and end using jquery and moment js, it should help you out.

   Note that I've added async: false to $.ajax in order to have only one request at a time.

   Also note that this code works with FullCalendar 2.* . Since you're talking about an existing application, some things will be different. The documentation for events of version 1.* states that the signature is a bit different: function( start, end, callback ) { }