FullCalendar读取events.json事件时日期范围高亮显示少一天问题求解

问题成因 #

FullCalendar对全日期事件的end字段默认采用排他性计算规则：end指定的日期不会被纳入事件的实际渲染范围，事件仅会在start（包含）到end（不包含）的时间段内展示。
以你配置的2021-08-09至2021-08-15的事件为例，end值2021-08-15实际对应的是当天0点，事件仅覆盖到2021-08-14的23:59:59，因此不会显示8月15日的区块。你提到的2021-09-08至2021-09-10事件显示正常属于观测误差，按照当前配置该事件也只会展示到9月9日。

修复方案 #

有两种常用的修复方式，可根据你的需求选择：

• 方案1：修改数据源events.json，将所有全日期事件的end值统一向后加1天。例如：
  原"end": "2021-08-15"改为"end": "2021-08-16"，原"end": "2021-09-26"改为"end": "2021-09-27"，其余事件同理修改即可。
• 方案2：不修改数据源，在FullCalendar初始化配置中添加eventDataTransform回调，自动为全日期事件的结束日期加1天，修改后的日历初始化代码如下：

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        /*locale: 'pl',*/
        firstDay: 1,
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'prevYear,nextYear'
        },
        validRange: {
            start: '2021-01-01',
            end: '2022-01-01'
        },
        selectable: true,
        select: function (info) {
            alert('Selected ' + info.startStr + ' to ' + info.endStr);
        },
        events: {
            url: '/events.json',
            extraParams: function () {
                return {
                    cachebuster: new Date().valueOf()
                };
            }
        },
        // 新增的事件转换回调
        eventDataTransform: function(eventData) {
            if (eventData.end) {
                const endDate = new Date(eventData.end);
                endDate.setDate(endDate.getDate() + 1);
                eventData.end = endDate;
            }
            return eventData;
        }
    });
    calendar.render();
});

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