This is based on a previous question here that seem to be unanswered: FullCalendar select all dates in array/list?
I will be using nodejs to get data coming through for specific dates, and I need to select those dates on the FullCalendar in an array. Unfortunately the dates in the array are not highlighting and I am not sure why.
$(document).ready(function() {
$('#calendar').fullCalendar({});
var dates = ["2021-10-20", "2021-10-21"];
$('.fc-day').each(function () {
var thisdate = $(this).attr('data-date');
var td = $(this).closest('td');
if ($.inArray($(this).attr('data-date'), dates) !== -1) {
td.addClass('fc-state-highlight');
} else {
td.removeClass('fc-state-highlight');
}
});
});
The problem is with this :
$('.fc-day').each(function () {
var thisdate = $(this).attr('data-date');
var td = $(this).closest('td');
if ($.inArray($(this).attr('data-date'), dates) !== -1) {
td.addClass('fc-state-highlight');
} else {
td.removeClass('fc-state-highlight');
}
});
You are looping through only shown month days at first render and after that nothing happens when you change the month. Try this:
$(document).ready(function() {
var dates = ["2021-10-20", "2021-10-21"];
$('#calendar').fullCalendar({
dayRender: function(date, cell) {
var dateObj = new Date(date._d);
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
newdate = year + "-" + month + "-" + day;
if (dates.includes(newdate)) {
cell.addClass('fc-state-highlight');
}
}
});
});
Doc of day render function : https://fullcalendar.io/docs/v4/dayRender
Every time you change the month, dayRender function is beign called and for each day of month you check if it is included in your array of days.