FullCalendar事件排序忽略end参数 同天日程时间顺序显示异常

问题原因 #

1. 事件时间配置非法：你提供的BELLE ISLE BANKER事件的end字段值为2021-08-14T16:00:00.000Z，远早于该事件的start时间2021-09-10T19:00:00.000Z，属于无效的事件时间配置。FullCalendar处理end早于start的异常事件时，会跳过eventOrder定义的正常排序逻辑，触发默认兜底排序规则，导致排序错乱。
2. 默认排序规则干扰：dayGridMonth视图默认排序优先级为「事件持续时长从长到短」> 你配置的start/end时间排序，你提供的9月10日的事件里，NAIN BANKER持续时间为5天、MINIK ARCTICA持续时间为3天，因此即使MINIK ARCTICA的当日开始时间更早，也会排在持续时间更长的NAIN BANKER之后。

解决方案 #

第一步：修正所有异常事件时间 #

首先排查所有事件的end字段，确保所有事件的end时间晚于等于start时间，比如把BELLE ISLE BANKER的end时间改为你实际需要的、晚于2021-09-10的时间，从根源解决异常排序触发的问题。

第二步：自定义排序规则覆盖默认逻辑 #

如果你的FullCalendar版本是v5及以上，可直接使用函数式的eventOrder配置，完全自定义排序逻辑，彻底覆盖默认的持续时长优先规则：

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: events,
    // 替换原有的eventOrder数组配置，用自定义函数排序
    eventOrder: function(eventA, eventB) {
        // 优先按开始时间升序排列
        const startDiff = eventA.start.getTime() - eventB.start.getTime();
        if (startDiff !== 0) {
            return startDiff;
        }
        // 开始时间一致时，按结束时间升序排列
        return eventA.end.getTime() - eventB.end.getTime();
    },
    eventOrderStrict: true,
    timeFormat: 'H:mm',
    height: 'auto',
    displayEventEnd: false,
    eventClick: function (e) {
        console.log(e.event.start)
    }
});

第三步：可选优化 #

如果不需要用到事件自带的sortOrder字段，可直接删除所有事件中的该字段，避免被FullCalendar的兜底排序逻辑读取，进一步减少干扰。

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