CODEWITHSUNDEEP
fullcalendar
lummerland
lummerland

Reputation: 51

switch fullcalendar options on window resize without destroy

we built a calendar using fullcalendar.io and have an issue on that. If the container size gets smaller than 500px we want to reload the calendar using different options: the events should look a bit different, the click on events should behave different and so on. So we created the two different option sets and in the windowResize option we check, if the calendar should use the one or the other set. To force a re-init we use destroy: 

windowResize: function(view) {
    if(self.containerIsLarge()) {
        self.$container.fullCalendar('destroy');
        self.createLargeCalendar();
        return;
    }
},

Unfortunately we get some other issues then, that we are not really able to solve in a smart way (we work in an environment where there is an incompatible version of moment.js so we get trouble after destroying the calendar since it initializes with the incompatible moment.js and doesn't really work at all ...).

Is there a way to completely switch options and reload the calendar without destroying it before? I know about the on/off feature and the option setter but I didn't get it to work properly. Is this the correct way or did I miss something ... ?

Thanks in advance! Regards Manuel

Upvotes: 2

Views: 524

Answers (1)

lummerland
lummerland

Reputation: 51

Okay, after some hours of research I found a working solution.

1) remove all event callbacks that differ depending on the containers size (this is the alternative to 'destroy' I was looking for):

var calendar = self.$container.fullCalendar('getCalendar');
calendar.off('viewRender');
calendar.off('eventRender');
calendar.off('eventAfterAllRender');
calendar.off('eventClick');
calendar.off('eventLimitClick');
calendar.off('eventLimitText');

2) set all event callbacks and options needed now:

self.$container.fullCalendar('option', 'eventLimit', true);
calendar.on('viewRender', function (view, element) {
...
});
calendar.on('eventRender', function (event, element, view) {
...
});
calendar.on('eventLimitClick', function (cellInfo, jsEvent) {
...
});
...

3) trigger events and therefore run the new callback functions:

self.$container.fullCalendar('refetchEvents');
self.$container.fullCalendar('getView').triggerRender();

Regards Manuel

Upvotes: 2

Related Questions