FullCalendar3.10.0 eventOrder仅对同时长事件生效如何实现全事件自定义排序

架构老林

2026-10-4

FullCalendar v3 让自定义排序规则对所有事件（含跨天事件）生效的解决方案

问题根因

FullCalendar v3.x 版本的默认事件排序逻辑优先级如下，eventOrder 仅会在所有前置规则判定为相等的场景下才会触发，这就是同时长单日事件排序生效、跨天不同时长事件不生效的核心原因：

第一优先级：事件开始时间（越早越靠前）
第二优先级：是否为全天事件（全天事件优先级高于非全天）
第三优先级：事件持续时长（时长越长优先级越高）
第四优先级：自定义eventOrder规则

解决方案

使用 v3 原生支持的 eventSorter 配置项替换默认排序逻辑，该回调会作用于所有事件，不受时长、跨天属性限制，适配你将排序权重存在CSS类的场景，代码修改如下：

pOptions.eventSorter = function(a, b) {
  // 优先按自定义权重排序，权重取className第一个元素的数值，加兜底避免空值报错
  const weightA = parseInt(a.className[0] || 0, 10);
  const weightB = parseInt(b.className[0] || 0, 10);
  if (weightA !== weightB) {
    return weightA - weightB;
  }
  // 自定义权重相同时可保留默认的时间排序逻辑，不需要的话直接删除这段返回0即可
  if (a.start.isBefore(b.start)) return -1;
  if (a.start.isAfter(b.start)) return 1;
  const durationA = a.end ? a.end.diff(a.start) : 0;
  const durationB = b.end ? b.end.diff(b.start) : 0;
  return durationB - durationA;
};