FullCalendar is blank when having to be redrawn from empty data

问题

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].

回答1:

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({...

来源：https://stackoverflow.com/questions/32260969/fullcalendar-is-blank-when-having-to-be-redrawn-from-empty-data

标签

javascript

jquery

fullcalendar