Javascript FullCalendar 突出显示数组中的日期

Question

这是基于之前似乎没有答案的问题：FullCalendar select all dates in array/list?

我将使用 nodejs 获取特定日期的数据，我需要 select 数组中 FullCalendar 上的这些日期。不幸的是，数组中的日期没有突出显示，我不确定为什么。

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

Answer 1

问题在于：

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

您在第一次渲染时仅循环显示月日，之后当您更改月份时没有任何反应。试试这个：

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

每日渲染函数文档：https://fullcalendar.io/docs/v4/dayRender

每次更改月份时，都会调用 dayRender 函数，并针对每月的每一天检查它是否包含在您的日期数组中。

Javascript FullCalendar 突出显示数组中的日期

Javascript FullCalendar highlight dates in array

javascript

arrays

fullcalendar