React FullCalendar：如何让resourceTimelineWeek视图支持横向滚动？

我在使用React FullCalendar的resourceTimelineWeek视图时，遇到内容无法适配可用空间被截断的问题，希望让该视图支持横向滚动，确保所有内容都能正常访问。

问题视图截图 #

当前代码 #

<FullCalendar
titleFormat={{ year: "numeric", month: "long", day: "numeric" }}
views={{
    resourceTimeGridWeek: {
        type: "resourceTimeGrid",
        duration: { days: 7 },
    },
}}
datesAboveResources={true}
dayHeaderFormat={{ weekday: "long", meridiem: "long" }}
schedulerLicenseKey={process.env.REACT_APP_FULLCALENDAR_LICENSE_KEY}
ref={calendarRef}
plugins={[resourceTimelinePlugin, adaptivePlugin, resourceTimeGridPlugin, dayGridPlugin, interactionPlugin, listPlugin, rrulePlugin]}
headerToolbar={{
    left: "prev,next today",
    center: "title",
    right: "resourceTimeGrid,resourceTimeGridWeek,listWeek",
}}
initialView="resourceTimeGrid"
slotDuration="00:30:00"
slotMinTime="06:00:00"
slotMaxTime="22:00:00"
resourceAreaWidth="10%"
resources={resources}
resourceAreaHeaderContent="Classrooms"
events={sessions}
contentHeight="auto"
timeZone="UTC"
buttonText={{
    today: "Today",
    week: "Weekly",
    listWeek: "List",
    day: "Day",
    prev: "Prev",
    next: "Next",
    resourceTimelineDay: "Daily",
}}
/>

解决方案 #

1. 移除自适应插件并添加滚动容器 #

FullCalendar的adaptivePlugin会自动压缩日历布局以适配容器宽度，这是导致内容截断的主要原因。移除该插件后，给日历外层包裹一个带横向滚动的容器，让日历自然展开：

<div style={{ overflowX: 'auto', width: '100%' }}>
  <FullCalendar
    titleFormat={{ year: "numeric", month: "long", day: "numeric" }}
    views={{
        resourceTimeGridWeek: {
            type: "resourceTimeGrid",
            duration: { days: 7 },
        },
    }}
    datesAboveResources={true}
    dayHeaderFormat={{ weekday: "long", meridiem: "long" }}
    schedulerLicenseKey={process.env.REACT_APP_FULLCALENDAR_LICENSE_KEY}
    ref={calendarRef}
    plugins={[resourceTimelinePlugin, resourceTimeGridPlugin, dayGridPlugin, interactionPlugin, listPlugin, rrulePlugin]}
    headerToolbar={{
        left: "prev,next today",
        center: "title",
        right: "resourceTimeGrid,resourceTimeGridWeek,listWeek",
    }}
    initialView="resourceTimeGrid"
    slotDuration="00:30:00"
    slotMinTime="06:00:00"
    slotMaxTime="22:00:00"
    resourceAreaWidth="10%"
    resources={resources}
    resourceAreaHeaderContent="Classrooms"
    events={sessions}
    contentHeight="auto"
    timeZone="UTC"
    buttonText={{
        today: "Today",
        week: "Weekly",
        listWeek: "List",
        day: "Day",
        prev: "Prev",
        next: "Next",
        resourceTimelineDay: "Daily",
    }}
  />
</div>

2. 可选：强制设置列宽 #

如果需要更精准控制每列的宽度，可在视图配置中添加columnWidth参数，指定每列的像素宽度：

views={{
    resourceTimeGridWeek: {
        type: "resourceTimeGrid",
        duration: { days: 7 },
        columnWidth: 180, // 自定义列宽，单位像素
    },
}}

这样修改后，日历会保持列的合理宽度，当整体宽度超过容器时，外层容器会自动显示横向滚动条，所有内容都能通过滚动访问。

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