如何使用Fullcalendar实现资源横向、日期时间纵向排列的日历视图？

完全可以通过FullCalendar实现你描述的日历布局需求，这属于FullCalendar官方原生支持的资源时间轴类布局范畴。

核心实现逻辑 #

• 需要引入FullCalendar的@fullcalendar/resource-timeline扩展插件，该插件专门适配「资源作为水平列、时间维度沿垂直轴排布」的布局场景
• 基础配置中通过initialView参数即可指定符合要求的预设视图：
  • resourceTimelineWeek：周视图，垂直轴按天+小时粒度排列时间，顶部水平排列所有资源列
  • resourceTimelineMonth：月视图，垂直轴按天粒度展示整月时间范围，水平排布资源列
• 无限滚动需求可以通过自定义resourceTimeline视图的时间范围，配合滚动监听事件动态加载后续时间区间的日程、资源数据实现，无需额外改造核心布局

最小配置示例 #

你可以参考以下核心代码快速搭建基础效果：

import { Calendar } from '@fullcalendar/core';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

// 日历挂载DOM节点
const calendarEl = document.getElementById('calendar');

const calendar = new Calendar(calendarEl, {
  plugins: [resourceTimelinePlugin],
  initialView: 'resourceTimelineWeek',
  // 水平展示的资源列表，可动态增删
  resources: [
    { id: 'res1', title: '资源1' },
    { id: 'res2', title: '资源2' },
    { id: 'res3', title: '资源3' }
  ],
  // 日程事件数据
  events: [
    { resourceId: 'res1', title: '示例日程', start: '2024-06-10T09:00:00', end: '2024-06-10T11:30:00' }
  ]
});

calendar.render();

自定义调整方向 #

• 如果需要调整垂直时间轴的粒度，可以通过slotDuration参数设置最小时间块长度
• 资源列的宽度、样式、排序规则都支持通过配置项自定义调整，无需修改底层布局逻辑

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