1

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

Marco
  • 759
  • 3
  • 9
  • 22
  • You may find [this answer](http://stackoverflow.com/questions/17613582/fullcalendar-change-the-color-for-specific-days) helpful. – Rich Feb 07 '17 at 08:56
  • That answer (which I had already read) does not add anything to my question, It suggests to use "dayRender", which is already mentioned in my question. But thank you anyway. – Marco Feb 07 '17 at 11:32

1 Answers1

0

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');
Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
  • Thank you. I think I'll go with the first one, not becaus is more simple, but because I don't like the idea of a second fetch, as it may cause flickering events or, worse, the lost of user's action. – Marco Feb 07 '17 at 11:31
  • Of course, the table would briefly display without the holiday background colours, depending on how long the ajax request takes, that's true. – Constantin Groß Feb 07 '17 at 11:32