javascript - 必须从空数据中重新绘制时，FullCalendar 为空

Question

我已经尝试调试这个问题好几天了，但一无所获。

我将 FullCalendar 与最新的 Fiddle 演示一起使用 here

我的数据集如下所示。

var myDataset = {
    "classes": [
        [{
            "name": "ECEC 301 Advanced Programming for Engineers Lecture",
            "days": "MWF",
            "times": "02:00 pm - 03:20 pm",
            "crn": "11215"
        }, {
            "name": "ECEC 301 Advanced Programming for Engineers Lab",
            "days": "W",
            "times": "09:00 am - 10:50 am",
            "crn": "11216"
        }],
        [{
            "name": "ECEC 301 Advanced Programming for Engineers Lecture",
            "days": "MWF",
            "times": "02:00 pm - 03:20 pm",
            "crn": "11215"
        }, {
            "name": "ECEC 301 Advanced Programming for Engineers Lab",
            "days": "F",
            "times": "02:00 pm - 03:50 pm",
            "crn": "11217"
        },
        {
        "name": "SOC 101 Introduction to Sociology Lecture",
        "days": "TBD",
        "times": "",
        "crn": "11044",
        "campus": "Online",
        "enrollment": "CLOSED",
        "short_name": "SOC 101 Lecture"
        }
        ]
    ]
};

在实际代码中，myDataset 对象通过 AJAX 调用动态更新。

数据通过我编写的 API 更新，该 API 提供结果过滤功能，因此用户可以设置参数来更新日历 View (这会更改 myDataset)。

我遇到的一个问题是，当我设置过滤器使 myDataset 为空，然后取消过滤所有内容以便 myDataset 再次拥有数据时，我的 FullCalendar View 将简单地是空白的，即使里面有数据，并且正在推送事件(我已经检查过)。

问题似乎源于 removeEvents 方法，每次日历需要呈现新事件时都会调用该方法，以替换旧事件:

        // Clear all events to prepare for the next set of events.
        $('#calendar').fullCalendar('removeEvents');

        // Add events from JSON data
        $('#calendar').fullCalendar('addEventSource',
            function(start, end, timezone, callback) {
                var events = [];
                var overlap = [];
                ....

我尝试用以下方式关闭此方法:

        // Clear all events to prepare for the next set of events.
        $('#calendar').fullCalendar('rerenderEvents');

但是，这只是在现有事件上绘制事件，因此结果是一堆相互重叠的重叠事件。

我已经尝试过 refetchEvents 和许多其他方法。实际上，我什至不确定它是否与 removeEvents 有任何关系。

我的问题是 - 我该如何解决这个问题？如果问题没有像应该的那样详细，我深表歉意，但我真的不知道如何解决为什么没有事件被渲染的问题。我在上面显示的结果在技术上尽可能详细，以展示我是如何调试所有内容的。

编辑:好的，所以 rerenderEvents 解决了这个问题。 rerenderEvents 的唯一问题是事件显示在先前事件的顶部 [当在多个事件数组之间切换时]。

Answer 1

您需要在再次重新初始化之前调用destroy您的日历。为此，您可以调用 $('#calendar').fullCalendar('destroy');

在调用destroy 事件后设置您的数据集

var myDataset = result;

最后初始化你的日历

$('#calendar').fullCalendar({...