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:-)