FullCalendar.js如何设置指定事件刷新后仍固定显示在日历底部

在JavaScript项目中使用FullCalendar日历组件，需要实现标题为Cost My Event的事件在页面刷新重载后，始终固定显示在日历视图最底部的效果。
此前尝试通过eventRender、eventDidMount等配置回调实现该需求，均未得到预期结果。当前通过eventSource配置项加载事件数据，效果参考如下截图：

function renderCalender(val){

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  eventSources: [
    {
      events: [
        {
          title: 'My Event',
          start: '2022-05-31',
          end: '2022-05-31',
        },
        {
          title: 'My Event 1',
          start: '2022-05-31',
          end: '2022-06-02',
        }
      ],
    },
    {
      events: [
        {
          title: 'Cost My Event',
          start: '2022-05-31',
          end: '2022-05-31',
          url: 'http://google.com/'
        },
        {
          title: 'Cost My Event',
          start: '2022-06-01',
          end: '2022-06-02',
        }
      ],
      color: '#4caf50',
      textColor: '#fff',
    }
  ],
});
calendar.render();
}

通过DOM操作修改事件顺序的方案失效，核心原因是FullCalendar在视图切换、窗口resize、事件重载、页面重渲染时会重新生成事件DOM结构，手动调整的DOM顺序会被直接覆盖。最稳定的实现方式是使用组件原生提供的事件排序配置，从渲染逻辑层面固定事件顺序：

• 给所有需要沉底的Cost My Event事件添加自定义排序字段，设置较大的排序值；普通事件设置较小的排序值
• 全局配置eventOrder参数，指定事件按照自定义排序字段升序排列，数值越大的事件渲染位置越靠后
• 该配置是组件原生渲染规则，页面刷新、视图切换、事件重新加载都不会改变排序结果，不需要额外操作DOM

修改后的可运行代码如下：

function renderCalender(val){
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 全局指定事件排序规则：按eventOrder字段升序排列
    eventOrder: 'eventOrder',
    eventSources: [
      {
        events: [
          {
            title: 'My Event',
            start: '2022-05-31',
            end: '2022-05-31',
            eventOrder: 1 // 普通事件排序值小，优先渲染在上方
          },
          {
            title: 'My Event 1',
            start: '2022-05-31',
            end: '2022-06-02',
            eventOrder: 1
          }
        ],
      },
      {
        events: [
          {
            title: 'Cost My Event',
            start: '2022-05-31',
            end: '2022-05-31',
            url: 'http://google.com/',
            eventOrder: 999 // 排序值远大于普通事件，固定渲染在最底部
          },
          {
            title: 'Cost My Event',
            start: '2022-06-01',
            end: '2022-06-02',
            eventOrder: 999
          }
        ],
        color: '#4caf50',
        textColor: '#fff',
      }
    ],
  });
  calendar.render();
}

注意：如果后续新增其他需要固定排序的事件，只需要给对应事件设置对应梯度的eventOrder值即可，不需要修改其他配置。同排序值的事件会按照FullCalendar默认规则（开始时间、标题等）自动排序，不会影响整体固定层级。

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