FullCalendar V6 timeGridWeek视图行列互换实现方案咨询

FullCalendar V6没有直接原生配置实现行列反转的timeGrid视图，但可以通过Resource TimeGrid视图快速模拟需求，只需要少量配置，完全用纯JavaScript就能实现：

核心思路 #

把工作日（周一至周五）当作"资源"，利用resourceTimeGridWeek视图的"资源行+时间列"布局，刚好匹配你要的效果。

具体实现步骤 #

1. 定义工作日资源 #

先创建一个资源数组，每个资源对应一个工作日，用日期字符串作为resourceId，方便后续匹配事件：

const workdayResources = [
  { id: '2024-05-20', title: '周一' },
  { id: '2024-05-21', title: '周二' },
  { id: '2024-05-22', title: '周三' },
  { id: '2024-05-23', title: '周四' },
  { id: '2024-05-24', title: '周五' }
];

如果需要动态生成每周的工作日，可以用原生Date对象自动计算当前周的周一到周五。

2. 配置日历初始化参数 #

初始化日历的时候，启用资源插件，设置视图为resourceTimeGridWeek，并调整布局细节：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['resourceTimeGrid', 'interaction'],
    initialView: 'resourceTimeGridWeek',
    resources: workdayResources,
    // 调整时间列的显示格式
    slotLabelFormat: {
      hour: '2-digit',
      minute: '2-digit',
      meridiem: false,
      hour12: false
    },
    slotDuration: '00:30:00', // 时间槽间隔30分钟
    // 隐藏资源侧边栏，让工作日标题直接显示在每行顶部
    resourceAreaWidth: '0',
    // 映射原有事件到对应工作日资源
    events: function(info, successCallback) {
      // 替换为你的原有事件数组
      const originalEvents = [/* 你的事件数据 */];
      const mappedEvents = originalEvents.map(event => {
        const eventDate = event.start.toISOString().split('T')[0];
        return {
          ...event,
          resourceId: eventDate // 绑定到对应日期的资源
        };
      });
      successCallback(mappedEvents);
    }
  });
  calendar.render();
});

3. 动态生成每周工作日（可选） #

如果需要自动适配当前周的工作日，不用手动写资源数组，可以添加一个生成函数：

function generateWeeklyWorkdayResources() {
  const resources = [];
  const now = new Date();
  // 获取当前周的周一
  const monday = new Date(now.setDate(now.getDate() - now.getDay() + 1));
  // 生成周一到周五的资源
  for (let i = 0; i < 5; i++) {
    const date = new Date(monday);
    date.setDate(monday.getDate() + i);
    const dateStr = date.toISOString().split('T')[0];
    const dayName = ['周一','周二','周三','周四','周五'][i];
    resources.push({ id: dateStr, title: dayName });
  }
  return resources;
}
// 初始化时替换为：
resources: generateWeeklyWorkdayResources(),

替代方案：自定义视图类（代码量稍多） #

如果不想用资源视图，可以自定义一个继承自TimeGrid的视图类，重写布局逻辑，但需要修改日历的渲染结构，代码量比资源视图多。这种方式适合需要完全自定义布局的场景，但资源视图已经能满足大部分需求，更推荐前者。

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