Question

我们使用fullcalendar.io构建了一个日历，并且有一个问题。如果容器大小小于500px，我们希望使用不同的选项重新加载日历：事件应该看起来有点不同，点击事件应该表现不同等等。所以我们创建了两个不同的选项集，并在windowResize选项中检查，如果日历应该使用一个或另一个集。要强制重新初始化，我们使用destroy：

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

不幸的是我们得到了一些其他的问题，我们真的无法以聪明的方式解决（我们在一个不兼容的moment.js版本的环境中工作，所以我们在破坏日历后遇到麻烦，因为它初始化与不兼容的moment.js并没有真正起作用......）。

有没有办法完全切换选项并重新加载日历而不会破坏它？我知道开/关功能和选项设置器，但我没有让它正常工作。这是正确的方法还是我错过了什么......？

提前致谢！问候曼努埃尔

Answer 1

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

1）删除所有根据容器大小而不同的事件回调（这是我正在寻找的'destroy'的替代方法）：

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();

此致曼努埃尔

在窗口上切换fullcalendar选项调整大小而不破坏

1 个答案: