React 18+TypeScript中实现FullCalendar日为行资源为列视图

完全可以实现这个布局，而且不需要复杂的自定义视图开发——FullCalendar Scheduler插件（你已经在使用，从代码里的resource相关配置和schedulerLicenseKey能看出来）原生支持这种日期为行、资源为列的布局，核心是利用已有配置调整即可。

1. 核心配置确认 #

你代码里已经设置了datesAboveResources={false}，这是实现该布局的关键开关：

• 默认datesAboveResources=true时，资源列表在左侧（列）、日期标题在顶部（行）
• 设置为false后，日期会作为行显示在左侧资源区，资源则作为列横向排布，刚好匹配你要的效果

2. 优化自定义视图配置 #

针对周/月视图，你需要微调resourceTimeline类型的视图参数，确保日期行的粒度和显示格式符合需求：

const getCalendarViews = () => ({
  // 日期为行的周视图
  resourceTimelineWeek: {
    type: 'resourceTimeline',
    duration: { week: 1 },
    slotDuration: { days: 1 }, // 强制每行对应1天
    slotLabelFormat: { 
      weekday: 'long', // 显示完整星期名
      month: 'numeric', 
      day: 'numeric' 
    }, // 自定义日期标签格式
    resourceAreaWidth: '240px', // 日期列的宽度
  },
  // 日期为行的月视图
  resourceTimelineMonth: {
    type: 'resourceTimeline',
    duration: { month: 1 },
    slotDuration: { days: 1 },
    slotLabelFormat: { 
      weekday: 'short', // 月视图用短星期名节省空间
      month: 'numeric', 
      day: 'numeric' 
    },
    resourceAreaWidth: '240px',
  },
});

3. 插件依赖检查 #

确保你的plugins数组包含以下必需插件：

import { 
  resourceTimelinePlugin, 
  interactionPlugin, 
  dayGridPlugin 
} from '@fullcalendar/react';

const plugins = [resourceTimelinePlugin, interactionPlugin, dayGridPlugin];

如果要用resourceDayGrid类型的视图，还要加上resourceDayGridPlugin。

4. 可选样式微调 #

如果需要调整资源列的宽度、日期行的高度，可以通过自定义CSS覆盖FullCalendar的默认样式：

/* 调整资源列的最小宽度 */
.fc-resource-cell {
  min-width: 140px;
}
/* 调整日期行的最小高度 */
.fc-timeline-slot {
  min-height: 70px;
}

总结 #

你现有的代码已经走在正确的路上，只需要优化自定义视图的slotDuration和slotLabelFormat配置，就能完美实现日期为行、资源为列的布局，不需要额外开发复杂的自定义视图。

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