user2029958 user2029958 - 1 year ago 82
Ajax Question

Coloring holidays after an Ajax call in FullCalendar

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 Source

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');
    
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download