FullCalendar V5如何隐藏指定日期及对应事件 现有代码不生效

你的原有代码存在几个核心问题导致不生效：

• FullCalendar V5 已经废弃了dayRender回调，替换为dayCellDidMount
• JS内置Date对象的月份从0开始计数，new Date(2021, 9, 10)实际代表2021年10月10日，不符合你要隐藏9月日期的需求
• 你直接对Date对象调用.css()方法属于语法错误，该方法是jQuery提供的DOM操作方法，不能用于原生Date对象
• hiddenDays配置仅支持隐藏固定星期几，不能指定具体日期

修正后代码 #

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    // 定义需要隐藏的日期列表，格式为YYYY-MM-DD
    const hiddenDates = ['2021-09-10', '2021-09-12'];

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        locale: 'es',
        headerToolbar: {
            right: "timeGridWeek,timeGridDay,listWeek",
            center: "title",
            left: "prev,next"
        },

        // 隐藏周末配置保留
        weekends: false,
        hiddenDays: [0, 6],

        timeFormat: 'H:mm',
        axisFormat: 'HH:mm',
        slotMinTime: '11:00',
        slotMaxTime: '21:00',

        // 日期单元格渲染回调，替换废弃的dayRender
        dayCellDidMount: function (info) {
            // 把当前渲染的日期转为YYYY-MM-DD格式
            const currentDate = info.date.toISOString().split('T')[0];
            // 如果当前日期在隐藏列表中，隐藏该单元格
            if (hiddenDates.includes(currentDate)) {
                info.el.style.display = 'none';
            }
        },

        // 事件渲染过滤，隐藏指定日期的所有事件
        eventAllow: function (dropInfo, draggedEvent) {
            const eventDate = dropInfo.start.toISOString().split('T')[0];
            return !hiddenDates.includes(eventDate);
        },

        // 原有事件配置保留
        events: [
          {
            url: 'alltwo.php',
            color: 'red',
          }
        ],

        eventSources: [
            {
                url: 'all.php',
                color: '#1c97df',
                textColor: 'whitesmoke',
                eventColor: '#378006',
                dataType: 'json',
            }
        ],
    });

    calendar.render();
});

补充说明 #

• 如果需要调整隐藏的日期，直接修改hiddenDates数组即可，支持添加任意多个离散日期
• 如果你用了周视图之外的视图比如月视图，该配置也会同步生效
• 用display: none隐藏单元格后，原有视图不会留下空白占位，显示效果和hiddenDays隐藏星期的效果一致

内容的提问来源于stack exchange，提问作者DevBook