在FullCalendar中调用Ajax后的着色假期

Question

I'm working with http://fullcalendar.io/ . My purpose is to give different background color to holidays. After a lot of searches I can say that a good solution is using dayRender hook. But how to fetch holidays list, and what about timing?

Solution 1: an Ajax call for each day.

dayRender: function (date, cell) {
    $.ajax({
        url: '/myproject/holidays?date='+date,
        type: "POST",
        success: function(isHoliday) {
            if (isHoliday) {
                cell.css("background-color", "red");
            }
        }
    });
}

It should work but... an Ajax call for EACH days? It seems not a nice solution..

Solution 2: one ajax call to fetch all the holidays

dayRender: function (date, cell) {
    if ($.inArray(date, holidayList)) {
        cell.css("background-color", "red");
    }
}

where "holidayList" was fetched somewhere before. That's my problem. Before when? How can I be sure that holidayList has been completed fetched before each dayRender is called? In other words: is there a hook I can rely on to fetch the holidays list?

Thank you

Answer 1

Two options I see here:

1. Initialize the whole calendar only after the holiday fetching Ajax request is done (and meanwhile display a loader/spinner). Simple, but not "pretty".

2. As soon as the holiday fetching Ajax request is done, refresh the whole calendar view. As the internal reinitView method is sadly not being exported to be called externally, you have to do it in a few more steps:

    var fcEl = $('#calendar'), view = fcEl.fullCalendar('getView'); view.unrenderDates(); view.renderDates(); fcEl.fullCalendar('refetchEvents');