When using jquery fullCalendar, Why am i seeing duplicate events after switching months?

Question

I am using jquery fullCalendar plugin and i am running into a weird issue.

When i load the first month (December 2013 in this case) it works fine . I call my ajax event and return a set of events. I return 40 events from my server and i see 40 events render.

I then move to the next month (Jan 2014) and it also works fine. (41 events from the server and 41 events show up in the GUI)

I then click BACK to change back to December 2013 and i get the ajax event, which returns the same 40 events (as above) but when the calendar load it see every event in December duplicated (80 events are shown on the GUI) even though i only send back 40 from the server and i see 40 during the events callback.

Here is my code:

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next title today',
    right: ''
  },
  lazyFetching: false,
  editable: false,
  timeFormat: 'H:mm{-H:mm} ',

  viewDisplay: function (view) {
    ViewDisplay();
  },

  events: function (start, end, callback) {

    $('#Month').val($('#calendar').fullCalendar('getDate').getMonth() + 1);
    $("#Year").val($('#calendar').fullCalendar('getDate').getUTCFullYear());

    var serializedFormInfo = $('#rotaForm').serialize();

    $.ajax({
      url: '/SupportRota/GetEvents/',
      dataType: 'json',
      cache: false,

      data: serializedFormInfo,
      success: function (data) {
        callback(data.RotaEvents);
      }
    });
  }
});

I tried adding lazyLoading: false as I assumed it was some sort of caching, but that doesn't seem to solve the issue.

I put a breakpoint in firebug on the line

callback(data.RotaEvents)

And i see 40 events but 80 events show up on the screen during the scenario stated above.

Any suggestion?

Answer 1

If the event was set up with

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

(as in the example I found) you might want to specify the event creation with:

$('#calendar').fullCalendar('renderEvent', copiedEventObject, false);

the false makes the event "unsticky" (which is default behaviour; you can also just drop the true) and will allow the event to disappear when the calendar refetches events - that did it for me:-)

Answer 2

Maybe an "hardcore" answer, but simple : I think that the events may be cached in the browser and explain why you have duplicates.

Just add this line before your ajax call :

$('.fc-event').remove();

You don't have to worry about if this event is already rendered or not, and that may be quicker in term of loading.

Answer 3

You need to filter the events you return from your feed based on the start/end arguments in combination with LazyLoading:

When set to true (the default), the calendar will only fetch events when it absolutely needs to, minimizing AJAX calls. For example, say your calendar starts out in month view, in February. FullCalendar will fetch events for the entire month of February and store them in its internal cache. Then, say the user switches to week view and begins browsing the weeks in February. The calendar will avoid fetching events because it already has this information stored.

If you return all events regardless of time period, you will get duplicates for every new time period you load. (For every new month you display).

In other words: If you have 10 events in december, make sure you only return these 10 events when the time period is december. You should pass the start/end paramenters to your json feed to reduce the data sent back to browser as well to get the most out of the LazyLoading feature.

Answer 4

I guess, you could just avoid reloading duplicate events:

events: function (start, end, callback) {

  $('#Month').val($('#calendar').fullCalendar('getDate').getMonth() + 1);
  $("#Year").val($('#calendar').fullCalendar('getDate').getUTCFullYear());

  if (this.eventsDone && this.eventsDone[start + end]) { return; }

  var serializedFormInfo = $('#rotaForm').serialize();

  $.ajax({
    url: '/SupportRota/GetEvents/',
    dataType: 'json',
    cache: false,
    context: this,
    data: serializedFormInfo,
    success: function (data) {
      if (!this.eventsDone) {
        this.eventsDone = {};
      }
      this.eventsDone[start + end] = true;
      callback(data.RotaEvents);
    }
  });
}