如何在FullCalendar dayGridMonth视图按resourceId排序事件而非时间轴？

我希望在FullCalendar的dayGridMonth视图中，按resourceId（资源ID）对事件进行排序，而非默认的时间轴排序。

我的事件数据如下：

[
  { title: 'Event 1', start: '2024-02-01 09:00:00', resourceId: 'resource1' },
  { title: 'Event 2', start: '2024-02-01 10:00:00', resourceId: 'resource1' },  
  { title: 'Event 3', start: '2024-02-01 11:00:00', resourceId: 'resource2' },  
  { title: 'Event 4', start: '2024-02-01 12:00:00', resourceId: 'resource2' },  
  { title: 'Event 5', start: '2024-02-01 13:00:00', resourceId: 'resource1' },  
  { title: 'Event 6', start: '2024-02-01 14:00:00', resourceId: 'resource1' }
]

当前事件显示效果：

2024-02-01  
Event 1 id:1  
Event 2 id:1  
Event 3 id:2  
Event 4 id:2  
Event 5 id:1  
Event 6 id:1

期望的排序后效果：

2024-02-01  
Event 1 id:1  
Event 2 id:1  
Event 5 id:1  
Event 6 id:1  
Event 3 id:2  
Event 4 id:2

查阅FullCalendar官方文档未找到实现方法，请问该如何实现？

可以利用FullCalendar的eventOrder配置项实现自定义排序逻辑，具体步骤如下：

1. 基础配置：按resourceId排序
   在FullCalendar初始化配置中，设置eventOrder为'resourceId'，事件会先按resourceId分组排序，同resourceId下默认按start时间排序（符合需求）：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid'],
    initialView: 'dayGridMonth',
    eventOrder: 'resourceId', // 按resourceId排序
    events: [
      { title: 'Event 1', start: '2024-02-01 09:00:00', resourceId: 'resource1' },
      { title: 'Event 2', start: '2024-02-01 10:00:00', resourceId: 'resource1' },  
      { title: 'Event 3', start: '2024-02-01 11:00:00', resourceId: 'resource2' },  
      { title: 'Event 4', start: '2024-02-01 12:00:00', resourceId: 'resource2' },  
      { title: 'Event 5', start: '2024-02-01 13:00:00', resourceId: 'resource1' },  
      { title: 'Event 6', start: '2024-02-01 14:00:00', resourceId: 'resource1' }
    ]
  });
  calendar.render();
});

2. 自定义排序函数（复杂场景适用）
   如果需要更灵活的排序规则（比如resourceId的自定义顺序），可以给eventOrder传入排序函数：

eventOrder: function(eventA, eventB) {
  // 先比较resourceId
  if (eventA.resourceId < eventB.resourceId) {
    return -1;
  }
  if (eventA.resourceId > eventB.resourceId) {
    return 1;
  }
  // 同resourceId下按start时间排序
  return new Date(eventA.start) - new Date(eventB.start);
}

配置后，dayGridMonth视图中的事件会按resourceId分组显示，同组内保持时间顺序，完全符合期望效果。

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