FullCalendar 6.1如何设置时间顶部显示、日期侧边显示？

要实现时间行显示在顶部、日期列显示在侧边的布局，可通过FullCalendar的resourceTimeGrid视图结合自定义配置和样式来实现，具体步骤如下：

核心思路 #

利用FullCalendar的资源视图插件，将日期作为资源放在左侧侧边栏，同时调整时间轴的显示方向为横向，替代默认的日期横向、时间纵向的布局。

1. 引入必要插件 #

确保初始化日历时引入resourceTimeGrid插件（需先加载对应的资源视图脚本）。

2. 日历配置示例 #

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    plugins: ['resourceTimeGrid'],
    initialView: 'resourceTimeGridDay',
    // 顶部工具栏配置
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimeGridDay,resourceTimeGridWeek'
    },
    // 将日期定义为资源，对应侧边栏的日期项
    resources: [
      { id: '20240520', title: '2024-05-20' },
      { id: '20240521', title: '2024-05-21' },
      { id: '20240522', title: '2024-05-22' }
    ],
    // 事件绑定对应日期资源
    events: [
      {
        title: '项目评审会',
        start: '2024-05-20T09:30:00',
        end: '2024-05-20T11:00:00',
        resourceId: '20240520'
      },
      {
        title: '客户对接',
        start: '2024-05-21T14:00:00',
        end: '2024-05-21T16:00:00',
        resourceId: '20240521'
      }
    ],
    // 资源标签显示在左侧
    resourceLabelPlacement: 'left',
    // 时间轴配置
    slotMinTime: '08:00:00',
    slotMaxTime: '18:00:00',
    slotDuration: '01:00:00',
    timeZone: 'local'
  });
  calendar.render();
});

3. 自定义样式调整 #

通过CSS修改默认布局，让时间横向排列在顶部，优化侧边日期列样式：

/* 隐藏默认的纵向时间轴 */
.fc-timegrid-axis {
  display: none;
}

/* 将时间槽标签改为横向排列 */
.fc-timegrid-slot-label-container {
  flex-direction: row !important;
  border-bottom: 1px solid #ddd;
}

.fc-timegrid-slot-label {
  width: 80px;
  text-align: center;
  border-right: 1px solid #ddd;
  padding: 4px 0;
}

/* 侧边日期资源列样式 */
.fc-resource-area {
  width: 130px;
  background-color: #f8f9fa;
  border-right: 2px solid #dee2e6;
}

.fc-resource-cell {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #dee2e6;
}

效果说明 #

配置完成后，左侧侧边栏会显示所有日期资源，顶部横向排列时间节点，事件会精准对应到日期列与时间行的交叉区域，和你提供的示例图布局一致。如果需要更个性化的调整，可以通过FullCalendar的slotRender、resourceRender等钩子函数进一步修改DOM结构或样式。

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