必须从空数据重新绘制FullCalendar时为空白 [英] FullCalendar is blank when having to be redrawn from empty data

问题描述

我正在使用FullCalendar和最新的Fiddle演示

我已经尝试调试这个问题好几天了，但没有到任何地方。 a href =http://jsfiddle.net/46tnzj72/19/ =nofollow> here

我的数据集如下所示。

  var myDataset = {
classes：[
 [{
name ：ECEC 301工程师高级编程讲座，
天：MWF，
times：02:00 pm  -  03:20 pm，
crn ：11215
}，{
name：工程师实验室的ECEC 301高级编程，
days：W，
times： 09:00 am  -  10:50 am，
crn：11216
}]，
 [{
name：ECEC 301高级编程工程师讲座，
天：MWF，
次：02:00 pm  -  03:20 pm，
crn：11215
}，{
name：ECEC 301高级编程工程师实验室，
天：F，
times：02:00 pm  - 03:50 pm，
crn：11217
}，
 {
姓名：SOC 101社会学讲座简介，
天：TBD，
times：，
crn：11044，
校园：在线，
招生： CLOSED，
short_name：SOC 101讲座
} 
] 
] 
}; 
  

在真实世界的代码中， myDataset 对象通过AJAX调用动态更新。

数据通过我提供的API进行更新，提供对结果的过滤，因此用户可以设置参数以更新日历视图更改 myDataset ）。

我遇到的一个问题是，当我设置一个过滤器以使 myDataset 为空时， myDataset 有数据，我的FullCalendar视图只是空白，即使里面有数据，事件也被推送（我已经选中）。

这个问题似乎来自 removeEvents 方法，每当日历需要新的事件渲染时调用该方法，替换旧的事件：

  //清除所有事件以准备下一组事件。 
 $（'＃calendar'）。fullCalendar（'removeEvents'）; 
 
 //从JSON数据添加事件
 $（'＃calendar'）。fullCalendar（'addEventSource'，
函数（开始，结束，时区，回调）{
 var events = []; 
 var overlap = []; 
 .... 
  

我尝试将此方法切换为：

  //清除所有事件以准备下一组事件。
 $（'＃calendar'）。fullCalendar（'rerenderEvents'）; 
  

然而， ，它只是描绘现有事件的事件，所以结果是一堆重叠的事件。

我试过 refetchEvents 和其他许多人，实际上我不确定它是否与 removeEvents 有关。

我的问题是 - 我该如何解决这个问题？我很抱歉，如果问题不够详细，但我真的迷失在如何o解决为什么不呈现事件的问题。上面显示的结果和我在技术上详细描述的一样详细说明了我是如何调试一切的。

编辑：好的，所以 rerenderEvents 摆脱了这个问题。使用 rerenderEvents 的唯一问题是事件会显示在以前事件的顶部[在多个事件阵列之间切换时]。

解决方案

您需要在<$ c $之前调用销毁再次重新初始化。
来做，你可以调用 $（'＃calendar'）。fullCalendar（'destroy'）;

在调用销毁事件

后设置您的数据集

  var myDataset = result; 
  

并最终初始化您的日历

<$ p $ fullCalendar（{...

$（'＃calendar'） >希望这有助于。

I've been trying to debug this issue for a good couple days now, but have not gotten anywhere.

I am using FullCalendar with the latest Fiddle demo here

My dataset looks like the following.

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"
        }
        ]
    ]
};

In real world code, the myDataset object is updated dynamically through AJAX calls.

The data is updated through an API I wrote that offers filtering of results, so the user can set parameters to update the calendar view (which changes the myDataset).

One issue I have is, when I set a filter so that myDataset is empty, and then unfilter everything so that myDataset has data again, my FullCalendar view would simply be blank, even though there is data inside, and the events are being pushed (I've checked).

The problem seems to stem from the removeEvents method which is called every time the calendar needs new events rendered, replacing the old events:

        // 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 = [];
                ....

I tried switching this method out with:

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

However, that simply paints the events over existing events, so the result is a bunch of overlapping events overlayed each other.

I've tried refetchEvents and a number of others. I'm actually not even sure if it has anything to do with removeEvents.

My question is - how do I solve this issue? I apologize if the issue isn't as detailed as it should be, but I'm really lost at how to solve the issue of why no events are being rendered. The results I've shown above are as detailed as I could technically go to show how I debugged everything.

EDIT: Ok, so rerenderEvents gets rid of the issue. The only issue with rerenderEvents is that the events get displayed on TOP of previous events [when toggling between several arrays of events].

解决方案

you need to call destroy your calendar before re-initializing it again. to do that you can call $('#calendar').fullCalendar('destroy');

set your dataset after you call the destroy event

var myDataset = result;

and finally initialize your calendar

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

Hope this helps.

这篇关于必须从空数据重新绘制FullCalendar时为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！