javascript FullCalendar资源分组不适用于React

icomxhvb 于 2022-12-10 发布在 Java

关注(0)|答案(1)|浏览(162)

我试图实现完全相同的示例here
但在React：

<FullCalendar
            plugins={[
              interactionPlugin,
              timelinePlugin,
              resourceTimelinePlugin,
            ]}
            header={{
              left: 'today prev,next',
              center: 'title',
              right: 'resourceTimelineDay,resourceTimelineWeek',
            }}
            aspectRatio={1.6}
            defaultView="resourceTimelineDay"
            resourceGroupField="building"
            schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
            resources={[
              { id: 'a', building: '460 Bryant', title: 'Auditorium A' },
              { id: 'b', building: '460 Bryant', title: 'Auditorium B' },
              { id: 'c', building: '460 Bryant', title: 'Auditorium C' },
              { id: 'd', building: '460 Bryant', title: 'Auditorium D' },
              { id: 'e', building: '460 Bryant', title: 'Auditorium E' },
              { id: 'f', building: '460 Bryant', title: 'Auditorium F' },
              { id: 'g', building: '564 Pacific', title: 'Auditorium G' },
              { id: 'h', building: '564 Pacific', title: 'Auditorium H' },
              { id: 'i', building: '564 Pacific', title: 'Auditorium I' },
              { id: 'j', building: '564 Pacific', title: 'Auditorium J' },
              { id: 'k', building: '564 Pacific', title: 'Auditorium K' },
              { id: 'l', building: '564 Pacific', title: 'Auditorium L' },
              { id: 'm', building: '564 Pacific', title: 'Auditorium M' },
              { id: 'n', building: '564 Pacific', title: 'Auditorium N' },
              { id: 'o', building: '101 Main St', title: 'Auditorium O' },
              { id: 'p', building: '101 Main St', title: 'Auditorium P' },
              { id: 'q', building: '101 Main St', title: 'Auditorium Q' },
              { id: 'r', building: '101 Main St', title: 'Auditorium R' },
              { id: 's', building: '101 Main St', title: 'Auditorium S' },
              { id: 't', building: '101 Main St', title: 'Auditorium T' },
              { id: 'u', building: '101 Main St', title: 'Auditorium U' },
              { id: 'v', building: '101 Main St', title: 'Auditorium V' },
              { id: 'w', building: '101 Main St', title: 'Auditorium W' },
              { id: 'x', building: '101 Main St', title: 'Auditorium X' },
              { id: 'y', building: '101 Main St', title: 'Auditorium Y' },
              { id: 'z', building: '101 Main St', title: 'Auditorium Z' },
            ]}
          />

我在styles.scss文件中导入了以下内容：

@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/timeline/main.css";
@import "~@fullcalendar/resource-timeline/main.css";

但我得到了如下结果：

我不知道我错过了什么，但组字段没有显示。

JavaScript

来源：https://stackoverflow.com/questions/61518665/fullcalendar-resources-grouping-does-not-work-with-react

1条答案

按热度按时间

zbsbpyhn1#

我在时间线图表上也很挣扎。最后我找到了那个基本的设置。

import FullCalendar from "@fullcalendar/react";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

export default function App() {
  return (
    <div className="App">
      <FullCalendar
        schedulerLicenseKey="XXX"
        plugins={[resourceTimelinePlugin]}
        initialView="resourceTimelineMonth"
        nowIndicator
        headerToolbar={{
          center:
            "resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear",
          right: "today,prev,next,prevYear,nextYear"
        }}
        aspectRatio={3}
        resourceGroupField={"building"}
        resources={[
          { id: "a", building: "460 Bryant", title: "Auditorium A" },
          { id: "b", building: "460 Bryant", title: "Auditorium B" },
          { id: "c", building: "460 Bryant", title: "Auditorium C" },
          { id: "d", building: "420 Bryant", title: "Auditorium D" },
          { id: "e", building: "420 Bryant", title: "Auditorium E" },
          { id: "f", building: "420 Bryant", title: "Auditorium F" }
        ]}
        events={[
          {
            resourceId: "a",
            title: "event 1",
            start: "2022-12-01",
            end: "2022-12-22"
          },
          {
            resourceId: "b",
            title: "event 2",
            start: "2022-12-05T12:00:00+00:00",
            end: "2022-12-10T06:00:00+00:00"
          },

          {
            resourceId: "e",
            title: "event 3",
            start: "2022-12-09T09:00:00+00:00",
            end: "2022-12-09T14:00:00+00:00"
          }
        ]}
      />
    </div>
  );
}

enter image description here

赞(0）回复(0）举报 2022-12-10

我来回答

javascript FullCalendar资源分组不适用于React

1条答案

相关问题

热门标签

最新问答