如何在FullCalendar中实现自定义起始日的滚动30天月网格视图

原生FullCalendar确实没有提供直接配置任意起止日期的月网格视图，但可以通过扩展内置月视图的方式零侵入实现，完全保留原生月视图的周表头、单元格布局、事件渲染逻辑，不需要修改核心源码。

• 核心实现逻辑
  基于dayGridMonth视图类型做扩展，仅重写视图的可见日期范围计算规则，其余渲染逻辑全部复用原生月视图能力，保证样式和交互一致性。
• v6版本可直接运行的实现代码

import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  views: {
    customRangeMonthGrid: {
      type: 'dayGridMonth', // 全量继承月网格的渲染规则、样式、表头结构
      fixedWeekCount: true, // 固定6行网格高度，和标准月视图布局完全一致
      visibleRange: () => {
        // 此处自定义起止日期，例：首日为5月23日、末日为6月23日
        const rangeStart = new Date(2024, 4, 23) // 月份为0索引，4对应5月
        const rangeEnd = new Date(rangeStart)
        rangeEnd.setDate(rangeEnd.getDate() + 31) // 多算1天适配周对齐补位，避免最后一行截断
        return { start: rangeStart, end: rangeEnd }
      }
    }
  },
  initialView: 'customRangeMonthGrid',
  dateIncrement: { days: 30 }, // 点击前后切换按钮时，每次滚动30天范围
  showNonCurrentDates: true // 设为false可隐藏范围外补位的日期，仅保留空白占位
})

calendar.render()

• 动态调整起始日期方法
  需要修改网格起止日期时，不需要销毁日历实例，直接调用setOption更新visibleRange配置即可，视图会自动沿用月网格样式重绘。
• 实现注意事项
  • 不要直接使用基础dayGrid视图配置30天时长，该视图会自动按自然周截断范围，无法保留月视图的固定行高、表头布局
  • 计算结束日期时多预留1天是为了适配FullCalendar月视图按整周对齐的渲染规则，避免最后一周只显示部分日期，超出30天范围的补位日期可以通过自定义CSS添加灰化标记，和原生月视图的非当月日期样式保持一致
  • 如果不需要显示补位日期，将showNonCurrentDates设为false即可，网格只会渲染你设定的日期区间，单元格占位仍和标准月视图一致

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