反应调度器组件
: 警告: 通知: 本组件使用
mui编号 :emotion编号 :date-fns。 如果您的项目尚未使用这些 libs , 此组件可能不合适 .
安装
npm i @aldabil/react-scheduler
如果你计划使用 recurring 调度器中的事件,安装 rrule 软件包
使用量
import { Scheduler } from "@aldabil/react-scheduler";
示例
<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人 |
| 视图 | 绳子。 初始视图要装入 。 选项:“周”、“月”、“日”. 默认:"周"("周"不是作"周"作"周") |
| 议程 | 布尔。 激活议事日程视图 |
| 总是显示议程日 | 布尔。 如果选中的话, 将会显示没有事件的日行 |
| 月份 | 对象. 月视道具. 默认数字 : { |
| 礼拜 | 对象. 周观道具. 默认数字 : { |
| 日数 | 对象. 日观道具. 默认数字 : { |
| 选中日期 | 约会 初始选定日期 . 默认数字 : new Date() |
| 导航 | 布尔。 显示/隐藏上行日期导航. 默认数字 : true |
| 导航选择 | 用于上行日期导航的 CalendarPickerProps. 参考文献 日历选择器 API |
| 禁用维ewNavigator | 布尔。 显示/隐藏上行日期 视图导航. 默认数字 : false |
| 事件 | 进程事件阵列 . 默认: [ type ProcessedEvent = { |
| 事件渲染器 | 函数( 事件: Processed Event): 反应 。 反应节点. 对事件项目进行调试的函数, 请见下方的演示 海关事件渲染器* |
| 可编辑 | 布尔。 若为 true,调度单元格点击不会打开编辑器,事件项目不会显示编辑按钮,这适用于所有事件,并且可以在每次事件属性中被覆盖,参见 ProcessedEvent 类型. |
| 可删除 | 布尔。 事件项目是否显示删除按钮, 此选项将适用于所有事件, 并且可以在每次事件属性中被覆盖, 查看 ProcessedEvent 类型. |
| 可拖动 | 布尔。 是否为事件激活拖放, 此程序适用于所有事件, 并且可以在每次事件属性中被覆盖, 查看 ProcessedEvent 类型. |
| 获取远程事件 | 函数( RemoteQuery) 。 返回承诺 一系列事件。 可用回调来按父组件获取事件或获取 .type RemoteQuery = { |
| 字段 | 配置的额外字段组合 . 示例 { |
| 装入 | 布尔。 日历表的装入状态 |
| 装入组件 | 自定义覆盖默认的组件 CircularProgress |
| 确认 | 函数( 事件, 动作) 。 用远程数据使用新添加/编辑的事件返回承诺 . 动作数字 : add |
| 删除 | 函数( id) 以已删除的事件 ID 返回承诺以远程数据使用 . |
| 自定义编辑器 | 函数( 调度器) 。 覆盖编辑器模式 . 提供道具 调度器 带有辅助道具的对象 : { |
| 自定义查看器 | 函数( 事件: 处理过的事件, 关闭 :( ) 无效 ) 。 用来制作活动流行曲的全定制内容. 如果使用的话, viewerExtraComponent 打开 viewerTitleComponent 将被忽略 |
| 查看器 | 函数( 字段, 事件) OR 组件 。 事件查看器的附加组件 |
| 查看器 | 函数( 事件 ) 。 在 opper 中提供自定义标题的助手功能 |
| 查看器子标题 | 函数( 事件 ) 。 在 opper 中提供自定义字幕的助手功能 |
| 禁用视图 | 布尔。 如果选中的话, 观众 Popover 会在全球禁用 |
| 资源 | 阵阵. 用资源分割事件视图的资源阵列 示例 { |
| 资源字段 | 对象. 映射资源校正字段 . 示例数字 : { |
| 资源头组件 | 函数( 资源) 。 覆盖资源的标题组件 |
| 资源查看模式 | 显示资源模式 . 选项* : default |
| 资源变化 | 函数( 资源: 资源): 无效 。 当资源标签发生变化时触发,仅在 resourceViewMode="tabs" |
| 方向 | 绳子。 桌向来. rtl |
| 对话框MaxWidth | Edito 对话框最大版本 。 实例: lg |
| 语言 | 枣花地谱. 默认数字 : enUS |
| 小时格式 | 小时格式 . 选项数字 : 12 |
| 时区 | 时区字符串 冰岛身份证 |
| 翻译 | 对象. 翻译取景道具. 默认数字 : { |
| 关于 EventDrop 的 | 函数( 事件: DragEvent, probed On: Date, 更新 Event: 已处理 Event, 原 Event: 已处理 Event) 。 返回一个承诺,用于更新已丢弃事件的远程数据. 返回事件以内部更新状态, 如果事件状态在组件内管理, 则无效 |
| 在EventClick上 (英语) | 函数( 事件: 处理中的事件): 无效 。 单击事件项目时触发 |
| 编辑 | 函数( 事件: 处理中的事件): 无效 。 正在从弹出器编辑事件项目时触发 |
| 打开CellClick | 函数( 启动: 日期, 结束: 日期, 资源关键? : 字符串, 资源Val? : 字符串) |
| 选中 日期变化 | 函数( 日期: 日期): 无效 。 触发当 selectedDate 通过导航取日期器或 today 按钮 |
| 维尤切 | 函数( 视图: 视图, 议事日程? : boolean): 无效 。 当导航视图发生变化时触发 |
| 粘结导航 | 若为 true,导航控制器栏将粘相 |
| 点击更多 | 函数( 日期: goToday: 函数( 日期: 无效): 无效 。 点击“ 更多... ” 按钮时触发, 它收到日期和一个 goToDay 函数显示一个 specfic 日期的日视图. |
调度参考文件
曾经帮助管理和控制美国内部状态 Scheduler 组件来自 Scheduler 道具,示例:
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 类型以查看所有可用的字段和方法.
演示文稿
待办事项
- 测试
- 拖放 - 部分
- 可调整
- 经常性事件 -- -- 部分
- 本地化
- 小时格式