如何在Fullcalendar中显示年度周期、季节、学期并实现15周学期视图

我需要一款可按学期、学期周、年度周期、季节维度安排事件的日历。此前Toast Ui的Github官方建议我参考FullCalendar TypeScript相关方案，官方机器人引导我到此提问，想咨询是否有简便方法实现该需求。

该项目为学校场景使用，因此需要抽象化日历而非普通日历，我的目标是开发一款可安排事件并同步到学校LMS系统的日程日历，工作人员日常使用学期、季节、年度周期这类抽象时间表述。我咨询开发人员后选择基于JavaScript的FullCalendar实现，目前运行代码后的效果如下图：

我当前编写的代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridFourDay,dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    views: {
            timeGridFourDay: {
            type: 'dayGridMonth',
            duration: { week: 15 },
            buttonText: 'Semeters',
            weekNumbers: true       }
        },
    initialDate: '2020-09-12',
    navLinks: true, // can click day/week names to navigate views
    nowIndicator: true,
    weekNumbers: true,
    
    weekNumberCalculation: 'ISO',

    editable: true,
    selectable: true,
    dayMaxEvents: true,

但我尝试设置day: 75时，仅输出了部分周数，无法呈现75天即15周对应1个学期的完整视图，效果如下图：

我想要实现的是如下所示的视图样式，完整显示15周的学期视图，请问该如何实现？

你无法完整展示15周学期视图的核心原因是自定义视图的基础类型和参数配置错误，按以下步骤修改即可实现需求：

1. 把自定义视图的基础类型从dayGridMonth改为dayGrid，dayGridMonth是按月约束的特殊视图，会强制按自然月拆分，无法展示跨多月的连续周期；而dayGrid是通用的日期网格视图，支持自定义任意长度的周期展示
2. 修正duration参数的语法：你写的week要改为复数形式weeks，如果要用天数的话写法是days: 105（15周合计105天，你之前写的75天只有10周多，自然显示不全）
3. 额外增加fixedWeekCount: false配置，避免FullCalendar强制每月展示固定6周的冗余空白
4. 你原本的代码遗漏了calendar.render()调用，加上才能正常渲染日历

修复后的完整代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'semesterView,dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    views: {
      semesterView: { // 视图命名更语义化，避免和timeGrid类视图命名混淆
        type: 'dayGrid', // 换成通用日期网格视图
        duration: { weeks: 15 }, // 正确的复数参数写法
        buttonText: '学期视图',
        weekNumbers: true
      }
    },
    initialDate: '2020-09-01', // 建议调整为学期实际起始日，视图会自动从该日开始展示完整15周
    navLinks: true,
    nowIndicator: true,
    weekNumbers: true,
    weekNumberCalculation: 'ISO',
    editable: true,
    selectable: true,
    dayMaxEvents: true,
    fixedWeekCount: false // 关闭固定周数展示，避免多余空白
  });
  calendar.render(); // 必须调用render才会渲染日历
});

如果需要适配年度周期、季节维度的视图，只需要参照上面的写法新增自定义视图即可：

• 年度视图：配置duration: { years: 1 }，调整buttonText为年度视图
• 季度/季节视图：配置duration: { months: 3 }，调整buttonText为季节视图

如果后续要对接学校LMS系统同步日程，可以直接使用FullCalendar自带的eventAdd/eventChange/eventRemove等事件回调，在回调中调用LMS的开放接口完成数据同步即可。

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