@bitnoi.se/react-scheduler

---

✨ https://scheduler.bitnoise.pl/ 互联网档案馆的存檔,存档日期2013-12-21 ✨
开源,打字取向,轻量级,和超快回放组件,用于创建gantt图表.

Youtube 教学   二. 支助   无   二. 支助   报告问题

安装

# yarn
yarn add '@bitnoi.se/react-scheduler'
# npm
npm install '@bitnoi.se/react-scheduler'

示例用途

1. 导入调度器所需的样式

import "@bitnoi.se/react-scheduler/dist/style.css";

2. 将调度器组件导入到您的工程

import { Scheduler, SchedulerData } from "@bitnoi.se/react-scheduler";
import dayjs from "dayjs";

default export function Component() {
  const [filterButtonState, setFilterButtonState] = useState(0);

  const [range, setRange] = useState({
    startDate: new Date(),
    endDate: new Date()
  });

  const handleRangeChange = useCallback((range) => {
    setRange(range);
  }, []);

  // Filtering events that are included in current date range
  // Example can be also found on video https://youtu.be/9oy4rTVEfBQ?t=118&si=52BGKSIYz6bTZ7fx
  // and in the react-scheduler repo App.tsx file https://github.com/Bitnoise/react-scheduler/blob/master/src/App.tsx
  const filteredMockedSchedulerData = mockedSchedulerData.map((person) => ({
        ...person,
        data: person.data.filter(
          (project) =>
            // we use "dayjs" for date calculations, but feel free to use library of your choice
            dayjs(project.startDate).isBetween(range.startDate, range.endDate) ||
            dayjs(project.endDate).isBetween(range.startDate, range.endDate) ||
            (dayjs(project.startDate).isBefore(range.startDate, "day") &&
              dayjs(project.endDate).isAfter(range.endDate, "day"))
        )
      }))

  return (
    <section>
      <Scheduler
        data={filteredMockedSchedulerData}
        isLoading={isLoading}
        onRangeChange={handleRangeChange}
        onTileClick={(clickedResource) => console.log(clickedResource)}
        onItemClick={(item) => console.log(item)}
        onFilterData={() => {
          // Some filtering logic...
          setFilterButtonState(1);
        }}
        onClearFilterData={() => {
          // Some clearing filters logic...
          setFilterButtonState(0)
        }}
        config={{
          zoom: 0,
          filterButtonState,
        }}
      />
    </section>
  );
}

const mockedSchedulerData: SchedulerData = [
  {
    id: "070ac5b5-8369-4cd2-8ba2-0a209130cc60",
    label: {
      icon: "https://picsum.photos/24",
      title: "Joe Doe",
      subtitle: "Frontend Developer"
    },
    data: [
      {
        id: "8b71a8a5-33dd-4fc8-9caa-b4a584ba3762",
        startDate: new Date("2023-04-13T15:31:24.272Z"),
        endDate: new Date("2023-08-28T10:28:22.649Z"),
        occupancy: 3600,
        title: "Project A",
        subtitle: "Subtitle A",
        description: "array indexing Salad West Account",
        bgColor: "rgb(254,165,177)"
      },
      {
        id: "22fbe237-6344-4c8e-affb-64a1750f33bd",
        startDate: new Date("2023-10-07T08:16:31.123Z"),
        endDate: new Date("2023-11-15T21:55:23.582Z"),
        occupancy: 2852,
        title: "Project B",
        subtitle: "Subtitle B",
        description: "Tuna Home pascal IP drive",
        bgColor: "rgb(254,165,177)"
      },
      {
        id: "3601c1cd-f4b5-46bc-8564-8c983919e3f5",
        startDate: new Date("2023-03-30T22:25:14.377Z"),
        endDate: new Date("2023-09-01T07:20:50.526Z"),
        occupancy: 1800,
        title: "Project C",
        subtitle: "Subtitle C",
        bgColor: "rgb(254,165,177)"
      },
      {
        id: "b088e4ac-9911-426f-aef3-843d75e714c2",
        startDate: new Date("2023-10-28T10:08:22.986Z"),
        endDate: new Date("2023-10-30T12:30:30.150Z"),
        occupancy: 11111,
        title: "Project D",
        subtitle: "Subtitle D",
        description: "Garden heavy an software Metal",
        bgColor: "rgb(254,165,177)"
      }
    ]
  }
];

3. 如果出现一些问题,请参看下面的故障排除部分.

调度器 API

调度器组件道具

调度器配置对象

翻译对象示例

import enDayjsTranslations from "dayjs/locale/en";

const langs: LocaleType[] = [
  {
    id: "en",
    lang: {
      feelingEmpty: "I feel so empty...",
      free: "Free",
      loadNext: "Next",
      loadPrevious: "Previous",
      over: "over",
      taken: "Taken",
      topbar: {
        filters: "Filters",
        next: "next",
        prev: "prev",
        today: "Today",
        view: "View"
      },
      search: "search",
      week: "week"
    },
    translateCode: "en-EN",
    dayjsTranslations: enDayjsTranslations
  }
];

<Scheduler
  // ... //
  config={{
    lang: "en",
    translations: langs
  }}
/>;

调度器 localeType 对象

排程翻译对象

排程器上边栏对象

调度器数据

形状为

左侧 Colum 项目数据

可用作参数的数据 onItemClick 回调

资源项目

在网格上可视为平板且可取为 onTileClick 事件

解决问题

• 对于使用 RemixJS 的调度器, 请确保添加 @bitnoi.se/react-scheduler 改为 serverDependenciesToBundle 内 remix.config.js 像这样:

// remix.config.js
/** @type  {import('@remix-run/dev').AppConfig} */
module.exports = {
    // ...
    serverDependenciesToBundle: [..., "@bitnoi.se/react-scheduler"],
};

• 使用 NextJS( app 路由器) 时, 调度器需要用组件包裹 use client

"use client"
import { Scheduler, SchedulerProps } from "@bitnoi.se/react-scheduler";

default export function SchedulerClient(props: SchedulerProps) {
    return <Scheduler {...props} />;
}

• 使用 NextJS( 页面路由器) 时需要导入 dynamic数字 :

import dynamic from "next/dynamic";
const Scheduler = dynamic(() => import("@bitnoi.se/react-scheduler").then((mod) => mod.Scheduler), {
  ssr: false
});

• 如何自定义调度器尺寸

排程器绝对可以占用所有可用的空间. 如果您想要将固定的维度表包在一个带有相对位置的潜水器内.

使用样式组件的示例:

export const StyledSchedulerFrame = styled.div`
  position: relative;
  height: 40vh;
  width: 40vw;
`;

<StyledSchedulerFrame>
    <Scheduler  {...}/>
</StyledSchedulerFrame>

已知问题

1. 无反应
2. 由于 Firefox 与画布合作速度较慢, 在 Firefox 上工作时表现较慢

如何捐款

• 报告问题: 如果你遇到任何错误、故障或有任何改进建议,请 打开一个问题 在我们的 GitHub 仓库。 提供尽可能多的细节,包括复制这一问题的步骤.
• 建议加强:如果你有新功能或增强功能的想法,我们很想知道! 你们可以 打开一个问题 明确描述你的建议.
• 提交拉动请求:如果您已经开发出一个固定或您想贡献的新功能,您可以提交拉取请求. 以下是对这一过程的简要概述:
  • 清除仓库并创建自己的分支 : git checkout -b feat/your-branch-name。 。 。 .
  • 根据 代码样式和指南 从 发展.md。 。 。 .
  • 测试您的更改以确保它们能如预期的那样工作.
  • 将您的更改提交到您的防御库 .
  • 打开我们主仓库的拉取请求 master 树枝.
    • 至少添加一个审查器
    • 链接正确问题

联系人

如果你有任何问题或需要进一步协助,请随意联系我们 调度器@ bitnoi.se我们赞赏你的贡献并感谢你帮助我们改进这个项目!

许可证

麻省理工学院许可. 版权 (c) Bitnoise 2023.