FullCalendar中全天事件与多日事件的显示顺序问题解析

问题背景

在使用FullCalendar的月视图(dayGridMonth)时，开发者可能会遇到全天事件(allDay)与多日事件(multi-day)混合显示时的排序问题。具体表现为：

1. 当存在一个从某天上午9:45开始的多日事件时
2. 同时存在多个全天事件
3. 这些事件的显示顺序会出现不一致的情况

现象分析

在默认情况下，FullCalendar会按照以下规则显示事件：

• 第一天：全天事件显示在多日事件之前
• 第二天：全天事件却显示在多日事件之后

这种不一致的显示方式可能会给用户带来困惑，特别是当日历中包含大量事件时。

技术原理

FullCalendar内部有一个默认的事件排序机制。对于月视图中的事件显示顺序，它主要考虑以下几个因素：

1. 事件是否为全天事件(allDay属性)
2. 事件的开始时间
3. 事件的持续时间

默认情况下，FullCalendar不会优先显示全天事件，而是将所有事件(包括全天和非全天)混合在一起按照开始时间排序。

解决方案

要解决这个问题，我们可以利用FullCalendar提供的eventOrder配置选项。通过设置eventOrder: "-allDay"，我们可以强制让全天事件总是显示在非全天事件之前。

这个配置的工作原理是：

1. -allDay中的负号表示降序排列
2. 由于全天事件的allDay属性为true(值为1)，而非全天事件为false(值为0)
3. 降序排列会使true值排在前面

实现建议

在实际项目中，建议始终明确设置事件的显示顺序，特别是当有以下需求时：

1. 需要全天事件总是优先显示
2. 需要特定类型的事件优先显示
3. 需要自定义事件的排序规则

除了使用-allDay外，eventOrder还支持更复杂的排序规则，可以结合多个属性进行排序，如持续时间、事件ID等。

总结

FullCalendar提供了灵活的事件显示机制，但默认的排序规则可能不满足所有场景的需求。通过合理配置eventOrder属性，开发者可以轻松控制不同类型事件的显示顺序，确保日历视图的一致性和可读性。对于大多数使用场景，设置eventOrder: "-allDay"是一个简单有效的解决方案，可以确保全天事件始终优先显示在多日事件之前。