简介
@mats-maker/schedule-calendar 是一个基于 React 的日程表组件。它可以让前端工程师方便地创建和展示日程安排，同时提供了丰富的钩子函数和定制化选项。
安装
通过 NPM 安装：
npm install @mats-maker/schedule-calendar
使用
引入组件
组件可以通过以下代码进行导入：
import ScheduleCalendar from "@mats-maker/schedule-calendar";
渲染组件
为了在页面中渲染组件，您可以在组件的父组件中使用以下代码：
<ScheduleCalendar />
Props
以下是可供调用的 props：
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| events | Array | No | [] | 日程安排数组 |
| onEventClick | Function | No | () => {} | 日程安排被点击后发生的回调函数 |
| startTime | String | No | "08:00" | 日程安排表格的开始时间 |
| endTime | String | No | "20:00" | 日程安排表格的结束时间 |
| timeStep | Number | No | 30 | 时间间隔（以分钟为单位） |
| width | String | Number | No | "100%" | 组件的宽度 |
| height | String | Number | No | "800px" | 组件的高度 |
| timeFormat | String | No | "HH:mm" | 时间格式化的格式 |
| date | Moment | String | Number | No | moment() | 日程安排表格的日期 |
| hideHeader | Boolean | No | false | 是否隐藏表头 |
| hideWeekends | Boolean | No | false | 是否隐藏周末 |
| disableScroll | Boolean | No | false | 是否禁用滚动 |
| getCellHeight | (time: string, index: number) => number | No | () => 60 | 获取表格单元格的高度 |
| getColumnWidth | (columns: number) => number | No | () => (width / 7) | 获取表格列的宽度 |
| getColumnLabel | (column: Column) => React.ReactNode | No | (column) => column.day.format("DD") | 获取表格列的 label |
| getEventShape | (event: Event) => React.ReactNode | Object | No | (event) => ({}) | 获取日程安排的形状 |
| isEventDisabled | (event: Event) => boolean | No | () => false | 返回日程安排是否被禁用 |
| onRangeChange | (range: { start: Moment, end: Moment }) => {} | No | () => {} | 当时间范围发生更改时的回调函数 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- --------------------------------
----- ------ - -
-
------ ------------------------------
---- ------------------------------
------ -------- ---- ------
------------ -------- ------- ----------
------ ----------
--
-
------ ------------------------------
---- ------------------------------
------ ---------- ---------
------------ ------ -- ---- ------------
------ ----------
--
-
------ ------------------------------
---- ------------------------------
------ ------ ------
------------ -------- ----- ----------
------ ----------
--
-
------ ------------------------------
---- ------------------------------
------ ------- ---------
------------ ------------- -- --- ---------
------ ----------
--
--
----- --- - -- -- -
------ -
-----
-----------------
---------------
--------------------- -- ------------------ -------- -- -------
-----------------
---------------
-------------
-----------
------------
------------------
---------------
------------------
--------------------
---------------------
--------------------- ------ -- -
-- ----- --- -------- -
------ ----
- ---- -
------ ---
-
--
------------------------- -- --- - --------
------------------------ -- -
------ -
--
------------------------------------
-------------------------------------
---
--
--
---------------------- -- -
------ -
----
--------
---------------- ------------
------------- ------
-------- ------
--------- -------
--
-
-------------
------
--
--
------------------------ -- ------
---------------------- --
------------------ -------- -- ------------ ----------
-
--
------
--
--
------ ------- ----结论
使用 @mats-maker/schedule-calendar，您可以轻松地在您的项目中添加精美的日程表。
- 首先你需要安装 npm 库
@mats-maker/schedule-calendar - 随后你需要使用
import ScheduleCalendar from "@mats-maker/schedule-calendar";将组件引入 - 最后依据自己的需求传入相应的 Props 即可使用此组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd5a3