# @aldabil/react-scheduler 中文文档

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

版本：3\.1\.2
npm 元数据更新时间：2025-04-19T11:59:36.379Z
中文译文更新时间：2026-11-05T21:04:12.392Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：141 kB，55 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@mui/icons-material \>=7\.0\.0，@mui/material \>=7\.0\.0，@mui/x-date-pickers \>=7\.0\.0 & \<8\.0\.0，date-fns \>=4\.0\.0，react \>=18\.0\.0，react-dom \>=18\.0\.0，rrule \>=2\.8\.1
- 首次发布：2021-05-06T08:01:42.566Z
- 最新版本发布：2025-04-19T11:59:36.186Z
- 近 30 天下载量：21535（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：143（近 12 个月 0 个）

## 中文简介

基于 Material-UI 和 date-fns 的反应调度器组件

## 安装

```sh
npm install @aldabil/react-scheduler
```

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

## README

# 反应调度器组件

[![npm package](https://img.shields.io/npm/v/@aldabil/react-scheduler/latest.svg)](https://www.npmjs.com/package/@aldabil/react-scheduler) [![Twitter URL](https://img.shields.io/twitter/url?label=%40aldabil&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ffollow%3Fscreen_name%3Daldabil21)](https://twitter.com/intent/follow?screen_name=aldabil21)

> : 警告: **通知**: 本组件使用 `mui`编号 :`emotion`编号 :`date-fns`。 如果您的项目尚未使用这些 libs , 此组件可能不合适 .

## 安装

```jsx
npm i @aldabil/react-scheduler
```

如果你计划使用 `recurring` 调度器中的事件,安装 `rrule` [软件包](https://www.npmjs.com/package/rrule)

## 使用量

```jsx
import { Scheduler } from "@aldabil/react-scheduler";
```

## 示例

```jsx
<Scheduler
  view="month"
  events={[
    {
      event_id: 1,
      title: "Event 1",
      start: new Date("2021/5/2 09:30"),
      end: new Date("2021/5/2 10:30"),
    },
    {
      event_id: 2,
      title: "Event 2",
      start: new Date("2021/5/4 10:00"),
      end: new Date("2021/5/4 11:00"),
    },
  ]}
/>
```

### 排程道具

所有道具都一样 _选项_

| Prop | 数值 |
| --- | --- |
| 高度 | 编号。 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}小高点.  
_默认_: 600人 |
| 视图 | 绳子。 初始视图要装入 。 选项:“周”、“月”、“日”.  
_默认_:"周"("周"不是作"周"作"周") |
| 议程 | 布尔。 激活议事日程视图 |
| 总是显示议程日 | 布尔。 如果选中的话, 将会显示没有事件的日行 |
| 月份 | 对象. 月视道具.  
_默认_数字 :
{  
weekDays: \[0, 1, 2, 3, 4, 5\],   
weekStartOn: 6,   
startHour: 9,   
endHour: 17,  
cellRenderer?:(props: CellProps) => React.ReactNode,  
navigation: true,  
disableGoToDay: false  
}

 |
| 礼拜 | 对象. 周观道具.  
_默认_数字 :

{   
weekDays: \[0, 1, 2, 3, 4, 5\],   
weekStartOn: 6,   
startHour: 9,   
endHour: 17,  
step: 60,  
cellRenderer?:(props: CellProps) => React.ReactNode,  
navigation: true,  
disableGoToDay: false  
}

 |
| 日数 | 对象. 日观道具.  
_默认_数字 :

{  
startHour: 9,   
endHour: 17,   
step: 60,  
cellRenderer?:(props: CellProps) => React.ReactNode,  
hourRenderer?:(hour: string) => React.ReactNode,  
navigation: true  
}

 |
| 选中日期 | 约会 初始选定日期 .  
_默认_数字 : `new Date()` |
| 导航 | 布尔。 显示/隐藏上行日期导航.  
_默认_数字 : `true` |
| 导航选择 | 用于上行日期导航的 CalendarPickerProps. 参考文献 [日历选择器 API](https://mui.com/x/api/date-pickers/calendar-picker/#main-content) |
| 禁用维ewNavigator | 布尔。 显示/隐藏上行日期 视图导航.  
_默认_数字 : `false` |
| 事件 | 进程事件阵列 .  
_默认_: \[  

type ProcessedEvent = {  
event\*id: number or string;  
title: string;  
subtitle?: string;  
start: Date;  
end: Date;  
disabled?: boolean;  
recurring: RRule;  
color?: string or "palette.path";  
textColor?: string or "palette.path";  
editable?: boolean;  
deletable?: boolean;  
draggable?: boolean;  
allDay?: boolean;  
agendaAvatar?: React.ReactElement | string  
sx?: Mui sx prop  
} 

 |
| 事件渲染器 | 函数( 事件: Processed Event): 反应 。 反应节点.  
对事件项目进行调试的函数, 请见下方的演示 海关事件渲染器\* |
| 可编辑 | 布尔。 若为 `true`,调度单元格点击不会打开编辑器,事件项目不会显示编辑按钮,这适用于所有事件,并且可以在每次事件属性中被覆盖,参见 `ProcessedEvent` 类型. |
| 可删除 | 布尔。 事件项目是否显示删除按钮, 此选项将适用于所有事件, 并且可以在每次事件属性中被覆盖, 查看 `ProcessedEvent` 类型. |
| 可拖动 | 布尔。 是否为事件激活拖放, 此程序适用于所有事件, 并且可以在每次事件属性中被覆盖, 查看 `ProcessedEvent` 类型. |
| 获取远程事件 | 函数( RemoteQuery) 。 返回承诺 一系列事件。 可用回调来按父组件获取事件或获取 .  

type RemoteQuery = {   
 start: Date;  
 end: Date;  
 view: "day" | "week" | "month";  
}

 |
| 字段 | 配置的额外字段组合 .  
示例

 {   
 name: "description",   
 type: "input" ,   
 config: { label: "Description", required: true, min: 3, email: true, variant: "outlined", ....  
}

 |
| 装入 | 布尔。 日历表的装入状态 |
| 装入组件 | 自定义覆盖默认的组件 `CircularProgress` |
| 确认 | 函数( 事件, 动作) 。 用远程数据使用新添加/编辑的事件返回承诺 .  
_动作_数字 : `add` |
| 删除 | 函数( id) 以已删除的事件 ID 返回承诺以远程数据使用 . |
| 自定义编辑器 | 函数( 调度器) 。 覆盖编辑器模式 .  
提供道具 _调度器_ 带有辅助道具的对象 :  

{  
state: state obj,   
close(): void  
loading(status: boolean): void  
edited?: ProcessedEvent  
onConfirm(event: ProcessedEvent, action:EventActions): void  
}

 |
| 自定义查看器 | 函数( 事件: 处理过的事件, 关闭 :( ) 无效 ) 。 用来制作活动流行曲的全定制内容. 如果使用的话, `viewerExtraComponent` 打开 `viewerTitleComponent` 将被忽略 |
| 查看器 | 函数( 字段, 事件) OR 组件 。 事件查看器的附加组件 |
| 查看器 | 函数( 事件 ) 。 在 opper 中提供自定义标题的助手功能 |
| 查看器子标题 | 函数( 事件 ) 。 在 opper 中提供自定义字幕的助手功能 |
| 禁用视图 | 布尔。 如果选中的话, 观众 Popover 会在全球禁用 |
| 资源 | 阵阵. 用资源分割事件视图的资源阵列  
_示例_

{  
assignee: 1,  
text: "User One",   
subtext: "Sales Manager",   
avatar: "https://picsum.photos/200/300",   
color: "#ab2d2d",  
 }

 |
| 资源字段 | 对象. 映射资源校正字段 .  
_示例_数字 :

{  
idField: "admin\*id",   
textField: "title",   
subTextField: "mobile",  
avatarField: "title",   
colorField: "background",  
}

 |
| 资源头组件 | 函数( 资源) 。 覆盖资源的标题组件 |
| 资源查看模式 | 显示资源模式 .  
选项\* : `default` |
| 资源变化 | 函数( 资源: 资源): 无效 。 当资源标签发生变化时触发,仅在 `resourceViewMode="tabs"` |
| 方向 | 绳子。 桌向来. `rtl` |
| 对话框MaxWidth | Edito 对话框最大版本 。 实例: `lg` |
| 语言 | 枣花地谱. _默认_数字 : `enUS` |
| 小时格式 | 小时格式 .  
_选项_数字 : `12` |
| 时区 | 时区字符串 [冰岛身份证](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
| 翻译 | 对象. 翻译取景道具.  
_默认_数字 :

{  
 navigation: {  
 month: "Month",  
 week: "Week",  
 day: "Day",  
 today: "Today"  
 agenda: "Agenda"  
 },  
 form: {  
 addTitle: "Add Event",  
 editTitle: "Edit Event",  
 confirm: "Confirm",  
 delete: "Delete",  
 cancel: "Cancel"  
 },  
 event: {  
 title: "Title",  
 subtitle: "Subtitle",  
 start: "Start",  
 end: "End",  
 allDay: "All Day"  
},  
 validation: {  
 required: "Required",  
 invalidEmail: "Invalid Email",  
 onlyNumbers: "Only Numbers Allowed",  
 min: "Minimum {{min}} letters",  
 max: "Maximum {{max}} letters"  
 },  
 moreEvents: "More...",  
 noDataToDisplay: "No data to display",  
 loading: "Loading..."  
}

 |
| 关于 EventDrop 的 | 函数( 事件: DragEvent, probed On: Date, 更新 Event: 已处理 Event, 原 Event: 已处理 Event) 。 返回一个承诺,用于更新已丢弃事件的远程数据. 返回事件以内部更新状态, 如果事件状态在组件内管理, 则无效 |
| 在EventClick上 (英语) | 函数( 事件: 处理中的事件): 无效 。 单击事件项目时触发 |
| 编辑 | 函数( 事件: 处理中的事件): 无效 。 正在从弹出器编辑事件项目时触发 |
| 打开CellClick | 函数( 启动: 日期, 结束: 日期, 资源关键? : 字符串, 资源Val? : 字符串) |
| 选中 日期变化 | 函数( 日期: 日期): 无效 。 触发当 `selectedDate` 通过导航取日期器或 `today` 按钮 |
| 维尤切 | 函数( 视图: 视图, 议事日程? : boolean): 无效 。 当导航视图发生变化时触发 |
| 粘结导航 | 若为 `true`,导航控制器栏将粘相 |
| 点击更多 | 函数( 日期: goToday: 函数( 日期: 无效): 无效 。 点击“ 更多... ” 按钮时触发, 它收到日期和一个 `goToDay` 函数显示一个 specfic 日期的日视图. |

### 调度参考文件

曾经帮助管理和控制美国内部状态 `Scheduler` 组件来自 `Scheduler` 道具,示例:

```js
import { Scheduler } from "@aldabil/react-scheduler";
import type { SchedulerRef } from "@aldabil/react-scheduler/types"

const SomeComponent = () => {
  const calendarRef = useRef<SchedulerRef>(null);

  return <Fragment>
    <div>
      <Button onClick={()=>{
        calendarRef.current.scheduler.handleState("day", "view");
      }}>
        Change View
      </Button>
      <Button onClick={()=>{
        calendarRef.current.scheduler.triggerDialog(true, {
          start: /*Put the start date*/,
          end: /*Put the end date*/
        })
      }}>
        Add Event Tomorrow
      </Button>
    </div>

    <Scheduler
      ref={calendarRef}
      events={EVENTS}
      //...
    />
  </Fragment>
};
```

这个 `calendarRef` 保存调度器组件的整个内部状态。 也许是最有用的方法 `calendarRef` 实值 `handleState`,例如:

```
calendarRef.current.scheduler.handleState(value, key);
```

考虑看里面 `SchedulerRef` 类型以查看所有可用的字段和方法.

### 演示文稿

-   [基础](https://codesandbox.io/p/sandbox/standard-x24pqk)
-   [远程数据](https://codesandbox.io/s/remote-data-j13ei)
-   [自定义字段](https://codesandbox.io/s/custom-fields-b2kbv)
-   [编辑/视频覆盖](https://codesandbox.io/s/customeditor-tt2pf)
-   [资源/视频模式](https://codesandbox.io/s/resources-7wlcy)
-   [自定义单元格动作](https://codesandbox.io/s/custom-cell-action-n02dv)
-   [自定义事件渲染器](https://codesandbox.io/s/custom-event-renderer-rkf4xw)

### 待办事项

-   [ ] 测试
-   [x] 拖放 - 部分
-   [ ] 可调整
-   [x] 经常性事件 -- -- 部分
-   [x] 本地化
-   [x] 小时格式

## 常见问题

### @aldabil/react-scheduler 是什么？

基于 Material-UI 和 date-fns 的反应调度器组件

### 如何安装 @aldabil/react-scheduler？

在项目目录运行 npm install @aldabil/react-scheduler，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@mui/icons-material（\>=7\.0\.0）、@mui/material（\>=7\.0\.0）、@mui/x-date-pickers（\>=7\.0\.0 & \<8\.0\.0）、date-fns（\>=4\.0\.0）、react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aldabil/react-scheduler 支持 TypeScript 吗？

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

### @aldabil/react-scheduler 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aldabil/react-scheduler 可以商用吗？

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

### @aldabil/react-scheduler 的下载量有多少？

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

### @aldabil/react-scheduler 还在维护吗？

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