fullcalendar: is there a way to call dayRender only after i load my events via events function

Question

i'm using fullcalendar in a web application i"m building.

i load my events with events function and ajax.

here is my code:

var ajaxData;
var eventsJsonArray;
var json_backgrundColor;
var json_iconstring;

//alert('Hello! 1!');
$(document).ready(function () {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next,month,agendaWeek,agendaDay'
        },
        //custom events function to be called every time the view changes
        events: function (start, end, timezone, callback) {
            var mStart = start.format('M')
            var yStart = start.format('YYYY')
            $.ajax({
                url: '$getMonthDataUrl',
                type: 'GET',
                data: {
                    startDate: start.format(),
                    endDate: end.format()
                },
                error: function () {
                    alert('there was an error while fetching events!');
                },
                success: function (data) {
                    alert('nice!!');
                    ajaxData = data;
                    json_iconstring = ajaxData['iconString'];
                    json_backgrundColor = ajaxData['Calendar_cell_background_color'];
                    eventsJsonArray = ajaxData['all_Events_For_The_Month'];
                    callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function
                }
            });
        },
        fixedWeekCount: false,
        showNonCurrentDates: false,

        dayRender: function (date, cell, view) {
            console.log(json_backgrundColor);//this brings eror because json_backgrundColor is undefined 
            var cellDate = date.format('D');
            if (date.format('M') == view.start.format('M')) //cheacking is this day is part of the currrent month (and not prev/next month)
            {
                alert(cellDate);
                cell.css('background-color', json_backgrundColor[cellDate]);//this brings eror because json_backgrundColor is undefined 

            }


        },
    })

});

when i load my events via ajax i'm also getting the information about which background color each cell should get. i can only get this info via the events ajax request.

the problem is that when the dayRender is running, i still don't have the background color data. (json_backgrundColor is undefined).

is there a way that dayRender will run after the events calendar will stop running? or any other code that will fix my problem.

many thanks!!

Answer 1

Your problem is that the "dayRender" callback runs after the view is changed (changing the date using prev/next counts as changing the view, for this purpose), but before the events for the new view have been downloaded and rendered. That's why your json_backgrundColor array is undefined.

Since you mentioned that the colour to be used depends on the exact nature of the events currently scheduled for that specific day, we need to find something that we can run after all the events, and this colour data, have been downloaded.

Inspecting the HTML, we can see that the table cells used to draw each day all have the CSS class "fc-day" applied. They also have a data-date property containing the day that they relate to. Finally, days that are disabled (outside the main month, due to you setting showNonCurrentDates:false) have an extra class of "fc-disabled-day" applied. We can use these pieces of information to identify the cells we want to change, without having to use the dayRender callback.

The eventAfterAllRender callback runs once when all the events have been rendered. Therefore this seems like a good place to alter the background colours of the cells:

eventAfterAllRender(function(view) {
    //loop through each non-disabled day cell
    $('.fc-day:not(.fc-disabled-day)').each(function(index, element) {
      //set the background colour of the cell from the json_backgroundColor arrray, based on the day number taken from the cell's "data-date" attribute.
      $(this).css('background-color', json_backgroundColor[moment($(this).data("date")).format("D")]);
    });
}

Note that I have renamed json_backgrundColor to json_backgroundColor to correct the spelling error.

N.B. This is brittle in the sense that it relies on the class names that fullCalendar uses internally to represent the day cells. If fullCalendar decides to do this differently in a future release, it will break (whereas if we were able to use the fullCalendar API via the designated callbacks, they would likely maintain consistency despite internal changes, or at least document any change). But it's pretty key to the Month view, so realistically it's not likely to change any time soon - you would just have to remember to test it if you update your fullCalendar version.