如何在FullCalendar月时间线视图中显示多个年份？

以下是三种可落地的实现方向：

1 自定义时间范围视图 #

• 直接修改视图的默认时间范围约束，配置自定义的展示区间，比如当前展示2022年全年时，将起止时间设置为2021-12-01到2023-01-31，即可额外显示上一年12月和下一年1月，满足跨年份拖拽需求
• 以FullCalendar Timeline组件为例，参考配置：

const calendar = new Calendar(el, {
  initialView: 'timelineCustom',
  views: {
    timelineCustom: {
      type: 'timelineMonth',
      duration: { months: 14 }, // 配置展示14个月，覆盖前后相邻年的首尾月
      slotDuration: { days: 1 }
    }
  },
  // 也可以通过validRange精确控制展示的起止日期
  validRange: {
    start: '2021-12-01',
    end: '2023-02-01'
  }
})

• 你可以在已开发的drop回调中，根据事件拖拽的目标位置动态调整validRange参数，重新渲染视图即可实现连续跨年份拖拽

2 拖拽时临时扩展视图范围 #

• 监听eventDragStart事件，当用户开始拖拽事件时，临时将视图的时间范围扩展为包含前后各1个月的区间，拖拽结束触发drop回调后再恢复原有的单年视图范围，不影响正常的页面展示逻辑
• 同时开启dragScroll配置，拖拽事件到视图边缘时自动滚动到相邻时间区间，无需提前渲染全部时间范围

3 边界占位插槽触发跳转 #

• 如果你不想改动原有单年视图的展示样式，可以在视图的首尾各增加一个上一年12月、下一年1月的占位区域，监听事件拖拽到占位区域的动作，在drop回调中直接将事件归属到对应年份的对应月份，再触发视图切换到目标年份重新渲染即可

内容的提问来源于stack exchange，提问作者Dan Tappin