在不破坏的情况下调整窗口大小时切换完整日历选项

Question

我们使用fullcalendar.io构建了一个日历，但在这方面存在问题。如果容器大小小于500px，我们希望使用不同的选项重新加载日历：事件看起来应该有点不同，点击事件的行为应该不同，等等。因此，我们创建了两个不同的选项集，并在windowResize选项中检查日历应该使用其中一个还是另一个。为了强制重新初始化，我们使用destroy:

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

不幸的是，我们还遇到了一些其他问题，这些问题我们真的无法以智能的方式解决(我们在一个有不兼容版本的moment.js的环境中工作，所以我们在销毁日历后会遇到麻烦，因为它是用不兼容的moment.js初始化的，根本不起作用…)。

有没有一种方法可以在不破坏日历的情况下完全切换选项并重新加载日历？我知道开关功能和选项设置器，但我没有让它正常工作。这是正确的方式吗？还是我错过了什么？

提前感谢！当做Manuel

Answer 1

好吧，经过几个小时的研究，我找到了一个可行的解决方案。

1) 删除所有根据容器大小而不同的事件回调(这是我正在寻找的"销毁"的替代方案)：

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) 设置现在需要的所有事件回调和选项：

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) 触发事件，从而运行新的回调函数：

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

问候Manuel