CODEWITHSUNDEEP
javascriptduplicatesfullcalendarfullcalendar-4
sylar32
sylar32

Reputation: 177

Events are duplicated when switching months in Fullcalendar v4

I'm using Fullcalendar v4 like this. Events are loaded correctly, but when I manually add a new one (it is also saved to SQL database via ajax call), then I change month and return back, this event is rendered twice. I'm not sure what cause this, because when I change months again, event is still doubled only, not trippled.

I've tried set lazyLoading or cache to false and also, for example, remove all events before rendering with $('.fc-event').remove(); but it did not help.

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  defaultView: 'resourceTimeline30',
  views: {
    resourceTimeline30: {
      type: 'resourceTimeline',
      duration: { days: 30 }
    }
  },
  editable: false,
  selectable: true,
  resources: [ ... ],
  events: 'https://www.example.com/?fullcalendar=load',
  /*
  // did not help
  lazyLoading: true,
  events: {
    url: 'https://www.example.com/?fullcalendar=load',
    cache: false,
    extraParams: function() {
      return {
        cachebuster: new Date().valueOf()
      };
    }
  }
  */
});
calendar.render();

Upvotes: 0

Views: 1023

Answers (1)

sylar32
sylar32

Reputation: 177

So, if anybody needs it, according comments above, the working solution is:

Replace:

  events: 'https://www.example.com/?fullcalendar=load',

With

  eventSources: [{
    'id': 1,
    'url': 'https://www.example.com/?fullcalendar=load'
  }],

And use that ID as second parameter in addEvent()

   calendar.addEvent(event, 1);

Upvotes: 3

Related Questions