如果你需要在你的 React 项目中集成一个日历组件，那么 bcv-react-big-calendar-fork 可能是一个不错的选择。
该 npm 包通过使用 React 和 BigCalendar 库，提供了一个可定制的日历组件，可以帮助你轻松地向你的应用中加入日期选择和排期功能。
安装
运行以下命令安装 bcv-react-big-calendar-fork：
npm install bcv-react-big-calendar-fork
使用
在你的 React 组件中引入 bcv-react-big-calendar-fork，创建一个 Calendar 组件并传入相关的 props。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------------------
----- ---------- ------- --------------- -
-------- -
------ -
-----
---------
---------------
---------------------
-----------------
---------------- -------
--
------
-
-
-
------ ------- -----------events 属性是一个必需属性，它用于指定要显示的事件列表。该属性应该传入一个数组，数组中每个元素都包含了事件的相关信息，例如：
-- -------------------- ---- -------
----- ------ - -
-
--- --
------ -----
------ --- ---------- -- --- --- ---
---- --- ---------- -- --- --- ---
--
---
--startAccessor 和 endAccessor 确定了事件对象中用于表示开始和结束时间的属性名称。
例如上面的 events 数组中，start 和 end 属性分别指定了事件的开始和结束时间。因此需要指定 startAccessor="start" 和 endAccessor="end"。
defaultDate 属性指定默认显示的日期。
可定制性
你可以通过传入一些选项来个性化你的日历，例如：
-- -------------------- ---- -------
---------
---------------
---------------------
-----------------
---------------- -------
---------------- ------- -------
-------------------- -- -------------------
---------------------- --
------
--------- ----- --------- ---------------------------------- - -
------- -------------------------------- - -
---------- -------------------
-
-
---------------------- -- --
------ -
---------------- ------------
--
---
--views 属性指定了用户可以浏览的视图类型，可以是 'month'、'week' 或 'day'。默认值为 ['month', 'week', 'day']。
onSelectEvent 和 onSelectSlot 属性可以用来处理和触发事件，例如通过 onSelectEvent 来在点击事件时弹出对话框。
eventPropGetter 属性用于设置事件的样式。
更多可定制选项，详细的 API 文档请访问 https://jquense.github.io/react-big-calendar/examples/index.html#extensible-components。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------------------
----- ------ - -
-
--- --
------ -----
------ --- ---------- -- --- --- ---
---- --- ---------- -- --- --- ---
--
-
--- --
------ -------
------ --- ---------- -- --- --- ---
---- --- ---------- -- --- --- ----
--
-
--- --
------ -----
------ --- ---------- -- --- --- ---
---- --- ---------- -- --- --- ---
----- ---------
--
-
--- --
------ -----
------ --- ---------- -- --- --- ---
---- --- ---------- -- --- --- ---
--
--
----- ---------- ------- --------------- -
-------- -
------ -
-----
---------
---------------
---------------------
-----------------
---------------- -------
---------------- ------- -------
-------------------- -- -------------------
---------------------- --
------
--------- ----- --------- ---------------------------------- - -
------- -------------------------------- - -
---------- -------------------
-
-
---------------------- -- --
------ -
---------------- -------- - - - ----- - -------
--
---
--
------
-
-
-
------ ------- -----------更多学习资源
- bcv-react-big-calendar-fork 版本库：https://github.com/cartant/bcv-react-big-calendar-fork
- BigCalendar 官方文档：https://jquense.github.io/react-big-calendar/examples/index.html#getting-started
- React.js 官方文档：https://reactjs.org/docs/getting-started.html
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551181e8991b448d243d
