Javascript FullCalendar highlight dates in array-CodePudding

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');
        }
    });
  
});

https://jsfiddle.net/kpsy1tuw/#

CodePudding user response：

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.