FullCalendar v5月视图异常：跨天事件未达上限却显示+more

解决方法 #

要让非起始日的跨天事件也能被纳入每天的dayMaxEvents显示数量，核心是调整事件排序规则，避免跨天事件的非起始日实例被挤到排序列表末尾导致被截断。

1. 自定义事件排序逻辑

通过eventSort回调，在保留eventType排序优先级的基础上，调整同一eventType下的排序规则，让跨天事件有机会进入前dayMaxEvents个显示位置。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    dayMaxEvents: 3,
    eventSort: function(a, b) {
      // 优先按eventType排序
      const typeA = a.extendedProps.eventType;
      const typeB = b.extendedProps.eventType;
      if (typeA !== typeB) {
        return typeA < typeB ? -1 : 1;
      }
      // 同一eventType下，按事件结束日期倒序，跨天事件结束日期更晚，会排在前面
      return b.end.getTime() - a.end.getTime();
    },
    events: [
      // 示例事件数据
      {
        title: '起始日事件1',
        start: '2024-04-01',
        end: '2024-04-01',
        extendedProps: { eventType: 1 }
      },
      {
        title: '跨天事件1',
        start: '2024-03-31',
        end: '2024-04-02',
        extendedProps: { eventType: 1 }
      }
    ]
  });
  calendar.render();
});

2. 简化版：调整eventOrder字段

如果不需要复杂的函数排序，也可以通过eventOrder字符串配置直接指定排序规则：

eventOrder: 'eventType, -end'

这会先按eventType升序排序，再按end日期降序排序，让跨天事件在同一eventType下优先显示。

原理说明

默认情况下，FullCalendar按事件的start日期排序，导致跨天事件的非起始日实例排在所有当日起始事件的后面。通过调整排序规则，让跨天事件在同一eventType下提前，就能确保它们有机会被纳入每天的前3个显示名额，避免出现“显示数量不足却有+more”的问题。

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