Javascript FullCalendar highlight dates in array

Question

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/#

Are you sure you are looping through all dates? from console.log(thisdate), are printed only to 2021-10-09 and if you try to put 2021-10-09 any date below is colored — Singh
– Singh, Commented Sep 30, 2021 at 18:52

Singh · Accepted Answer · 2021-09-30 19:20:37Z

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.

Collectives™ on Stack Overflow

Javascript FullCalendar highlight dates in array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related