# @bitnoi\.se/react-scheduler 中文文档

规范地址：https://npmcn.com/package/%40bitnoi.se/react-scheduler/

版本：0\.3\.1
npm 元数据更新时间：2024-08-23T11:06:41.787Z
中文译文更新时间：2026-11-08T04:37:11.699Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bitnoi.se/react-scheduler
原文对照：https://npmcn.com/package/%40bitnoi.se/react-scheduler/?lang=original
项目主页：https://github.com/Bitnoise/react-scheduler#readme
源码仓库：https://github.com/Bitnoise/react-scheduler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：331 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2023-10-11T10:00:24.727Z
- 最新版本发布：2024-08-23T11:06:41.574Z
- 近 30 天下载量：10836（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 0 个）

## 中文简介

![@bitnoise/react-scheduler](https://npmcn.com/package/%40bitnoi.se/react-scheduler/logo.svg)

* * *

✨ [https://scheduler.bitnoise.pl/ 互联网档案馆的存檔,存档日期2013-12-21](https://scheduler.bitnoise.pl/) ✨  
开源, 打印符

## 安装

```sh
npm install @bitnoi.se/react-scheduler
```

也可以使用：`pnpm add @bitnoi.se/react-scheduler`、`yarn add @bitnoi.se/react-scheduler`、`bun add @bitnoi.se/react-scheduler`

## README

![@bitnoise/react-scheduler](https://npmcn.com/package/%40bitnoi.se/react-scheduler/logo.svg)

* * *

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

[Youtube 教学](https://bit.ly/react_scheduler)   二. 支助   [无](https://www.npmjs.com/package/@bitnoi.se/react-scheduler)   二. 支助   [报告问题](https://github.com/Bitnoise/react-scheduler/issues/new)

* * *

我们很高兴我们的组件 吸引了你们的兴趣! 我们很想知道你在项目中是如何利用它的.

分享您的项目描述和截图, 以Scheduler为特色, 你可以成为5个幸运的赢家之一 接受我们的有限版本的罩!

本次升级一直持续到2024年9月25日. 详情请点击此处: [计划中的排程器 QQ](https://github.com/Bitnoise/react-scheduler/discussions/149)

**等不及要看你的惊人作品了! 祝你好运!**

### 新闻

如果你想继续更新来自技术世界的最新消息和新闻,请报名参加我们的通讯。 我们不垃圾邮件(我们每月发送一次电子邮件),我们不运行销售通讯,我们尊重你的时间.

亲眼看见: [新闻](https://www.bitnoise.pl/newsletter)

* * *

### 安装

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

### 示例用途

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

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

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

```ts
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

##### 调度器组件道具

| 属性名称 | 类型 | 参数 | 说明 |
| --- | --- | --- | --- |
| 正在丢失 | `boolean` | \- 说吧 | 在调度器上显示加载指标 |
| 换程 | `function` | 更新 `startDate` 财务报告和审定财务报表 `endDate` | 当用户到达当前制成的画布末端时运行 |
| 移动键 | `function` | 点击的资源数据 | 检测资源点击 |
| 项目点击 | `function` | 点击了左侧列项数据 | 检测左侧列上单击的项目 |
| 页面数据 | `function` | \- 说吧 | 点击过滤器按钮时调用回放 |
| 打开Filter数据 | `function` | \- 说吧 | 点击清晰的过滤按钮时调用回击( 清除按钮可见) **仅限** 当过滤按钮状态设定为 `>0`(中文(简体) ) |
| 配置 | `Config` | \- 说吧 | 带有调度器配置属性的对象 |

##### 调度器配置对象

* * *

| 属性名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 缩放 | `0` 或者说 `1` 或者说 `2` | 0 个 | `0` - 显示网格分为几周 `1` - 显示网格分为天 `2` - 显示网格,分为小时 |
| 过滤按钮状态 | `number` | 0 个 | `< 0` - 隐藏过滤按钮, `0` - 未设置过滤器时的状态, `> 0` - 设置一些过滤器时的状态(也可以处理) `onClearFilterData` 活动) |
| 最大记录 | `number` | 第50条 | 来自 `SchedulerData` 每页可见 |
| 朗语 | `en`, (中文(简体) ), `lt` 或者说 `pl` | 内 | 调度语言 |
| 包括Taken Hours On Weekends In DayView 视频 | `boolean` | `false` | 当给定资源超过一周时, 显示所拍摄的周末 |
| 显示工具 | `boolean` | `true` | 在牌盘上徘徊时显示工具提示 |
| 翻译 | `LocaleType[]` | `undefined` | 选项以添加特定的朗语翻译 |
| 显示我切换 | `boolean` | `false` | 显示在光/ 暗模式间切换的切换按钮 |
| 默认主题 | `light` 或者说 `dark` | `light` | 调度器的默认主题 |

#### 翻译对象示例

```ts
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 对象

| 属性名称 | 类型 | 说明 |
| --- | --- | --- |
| 编号 | `string` | 用于选择 lang 的密钥 |
| 朗语 | `Translation` | 有翻译对象 |
| 翻译代码 | `string` | 以本地Storage 保存的代码 |
| 翻译 | `string ILocale undefined` | 从dayjs 翻译对象 |

#### 排程翻译对象

| 属性名称 | 类型 |
| --- | --- |
| 感觉舒适 | `string` |
| 免费 | `string` |
| 装入下一个 | `string` |
| 装入上一个 | `string` |
| 结束 | `string` |
| 带子 | `string` |
| 搜索 | `string` |
| 礼拜 | `string` |
| 上边栏 | `Topbar` |

##### 排程器上边栏对象

| 属性名称 | 类型 |
| --- | --- |
| 过滤器 | `string` |
| 下一个 | `string` |
| 预览 | `string` |
| {\\fn华文楷体\\fs16\\1che0e0e0}今天 | `string` |
| 视图 | `string` |

##### 调度器数据

形状为

| 属性名称 | 类型 | 说明 |
| --- | --- | --- |
| 编号 | `string` | 唯一行编号 |
| 标签 | `SchedulerRowLabel` | 行的标签, `e.g person's name, surname, icon` |
| 数据 | `Array<ResourceItem>` | 数组 `resources` |

##### 左侧 Colum 项目数据

可用作参数的数据 `onItemClick` 回调

| 属性名称 | 类型 | 说明 |
| --- | --- | --- |
| 编号 | `string` | 唯一行编号 |
| 标签 | `SchedulerRowLabel` | 行的标签, `e.g person's name, surname, icon` |

##### 资源项目

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

| 属性名称 | 类型 | 说明 |
| --- | --- | --- |
| 编号 | `string` | 唯一资源 id |
| 标题 | `string` | 在资源平板上显示的资源标题 |
| 字幕 | `string (optional)` | 在资源平板上显示的资源字幕 |
| 说明 | `string (optional)` | 在资源平板上显示的资源描述 |
| 开始日期 | `Date` | 计算资源起始位置的日期 |
| 结束日期 | `Date` | 计算资源最终状况的日期 |
| 占用 | `number` | 盘旋时在资源工具提示上可见的给定行资源占用秒数 |
| bg 颜色 | `string (optional)` | 平板颜色 |

### 解决问题

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

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

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

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

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

```

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

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

-   如何自定义调度器尺寸

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

使用样式组件的示例:

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

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

### 已知问题

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

### 如何捐款

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

### 联系人

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

### 许可证

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

## 常见问题

### @bitnoi\.se/react-scheduler 是什么？

✨ https://scheduler\.bitnoise\.pl/ 互联网档案馆的存檔,存档日期2013-12-21 ✨ 开源, 打印符

### 如何安装 @bitnoi\.se/react-scheduler？

在项目目录运行 npm install @bitnoi\.se/react-scheduler，或使用 pnpm add / yarn add / bun add。

### @bitnoi\.se/react-scheduler 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bitnoi\.se/react-scheduler 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bitnoi\.se/react-scheduler 可以商用吗？

@bitnoi\.se/react-scheduler 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bitnoi\.se/react-scheduler 的下载量有多少？

根据 npm 官方下载统计，@bitnoi\.se/react-scheduler 在 2026/10/08 – 2026/11/06 这 30 天内被下载 10,836 次，日均约 361 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bitnoi\.se/react-scheduler 还在维护吗？

最新版本 0\.3\.1 发布于 2024/08/23（2 年前）；至今共发布 10 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。