FullCalendar v3横向资源日程视图迁移至v6方案咨询

原v3实现逻辑回顾 #

原v3通过自定义resourceView（基于agendaDay视图），设置slotDuration: '24:00:00'将时间槽设为一天，配合minTime和maxTime显示当前整月，资源横向展示在顶部，事件按所属资源分组排列。

v6对应实现方案 #

v6中没有直接匹配v3的自定义视图，但可以通过Resource Timeline视图（需单独引入资源插件）实现相同效果，核心是将时间轴的时间单位设为天，让资源横向排列。

步骤1：引入v6依赖 #

v6的资源功能拆分为独立插件，需引入对应资源；同时v6无需jQuery依赖，使用原生JS即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/resource-timeline/main.min.css">
<div id="calendar"></div>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/resource-timeline/main.min.js"></script>

步骤2：配置v6日历 #

替换v3的旧配置项，适配v6的API规范：

• 原defaultView改为initialView，使用resourceTimelineMonth作为基础视图
• 将slotDuration设为{ days: 1 }，确保每个时间槽对应一天
• 调整slotLabelFormat为v6支持的格式语法
• 资源和事件结构与v3兼容，保留resourceId关联逻辑

完整JS代码：

// 获取当月天数
const getDaysInMonth = () => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
};

// 获取当前日期
const getMonthDay = () => new Date().getDate();

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'resourceTimelineMonth',
    selectable: false,
    nowIndicator: false,
    allDaySlot: false,
    slotDuration: { days: 1 }, // 每个时间槽为1天
    slotLabelFormat: [
      { month: 'long', year: 'numeric' }, // 顶部标签显示月份+年份
      { day: 'numeric' } // 时间槽标签显示日期
    ],
    resources: [
      { id: 34470, title: 'Auditorium A' },
      { id: 344701, title: 'Auditorium B', eventColor: 'green' }
    ],
    events: [
      { id: '1', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 1' },
      { id: '11', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 2' },
      { id: '111', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 3' },
      { id: '1112', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 4' },
      { id: '2', resourceId: 344701, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 5' },
      { id: '4', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 6' },
      { id: '5', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 7' }
    ]
  });

  calendar.render();
});

步骤3：CSS适配 #

保留原v3的样式调整，适配v6的类名：

#calendar {
  max-width: 900px;
  margin: 20px auto;
}
.fc-event {
  height: 15px;
}

关键API变化说明 #

• v3的$('#calendar').fullCalendar()初始化方式改为v6的new FullCalendar.Calendar()构造函数
• defaultView配置项更名为initialView
• slotDuration支持对象格式（{ days: 1 }），语义更清晰
• 资源功能需单独引入resource-timeline插件，v3该功能为内置
• 日期格式化语法升级为Intl.DateTimeFormat风格配置

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