在React FullCallendar中，如何使资源时间线周视图水平滚动？

Question

我目前正在使用带有resourceTimelineWeek 视图的React FullCalendar，并且遇到一个问题，即内容不适合可用空间，导致其被切断。我想让资源时间线周视图水平滚动，以确保所有内容均可访问。

完整日历资源时间线周视图

这是代码：

<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",
}}

/>

Answer 1

您只需运行以下命令即可添加插件

scrollgridPlugin

：

npm i --save @fullcalendar/scrollgrid