Fullcalendar: is there a way to call dayRender only after i load my events via event function
I am using fullcalendar in my building web application.
i load my events event 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 also get information about what background color each cell should receive. I can only get this information via ajax event request.
the problem is when dayRender is running I still don't have background color data. (json_backgrundColor undefined).
Is there a way that dayRender will be triggered after the event calendar stops working? or any other code that will fix my problem.
Many thanks!
source to share
Your problem is that the "dayRender" callback is fired after the view has changed (for this purpose, to change the date, use the previous / next counts with the view change), but before the events for the new view have been loaded and displayed, So your array json_backgrundColor
undefined.
Since you mentioned that the color to be used depends on the exact nature of the events scheduled for that particular day, we need to find what we can run after all the events and data for that color have been loaded.
Checking the HTML, we can see that the table cells used for drawing every day have the CSS class "fc-day". They also have a property data-date
containing the day they belong to. Finally, days that are disabled (outside of the main month, due to setting showNonCurrentDates:false
), the additional class "fc-disabled-day" is applied. We can use this data to identify the cells we want to change without using a callback dayRender
.
The callback is eventAfterAllRender
fired once when all events have been displayed. So this seems like a good place to change the background colors in 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 "data-date" attribute.
$(this).css('background-color', json_backgroundColor[moment($(this).data("date")).format("D")]);
});
}
Note that I renamed json_backgrundColor
to json_backgroundColor
to correct a spelling error.
NB This is fragile in the sense that it relies on the class names that fullCalendar uses internally to represent the cells of the day. If fullCalendar decides to do it differently in a future version, it will break (whereas if we could use the fullCalendar API through assigned callbacks, they would probably maintain consistency despite internal changes, or at least document any changes ). But this is a pretty important point in the Month view, so it is unlikely to change anytime soon - you just need to remember it if you update the fullCalendar version.
source to share