什么是 react-big-calendar-11012018
react-big-calendar-11012018 是一个基于 React 的大型日历组件，可以方便地展示各种事件、时间段和日期。该组件支持多种展示模式，如月视图、周视图、日视图等，同时还可以自定义事件颜色、大小、位置等。
安装
使用 npm 安装：
npm install react-big-calendar-11012018 --save
使用方法
引入
在需要使用的模块处引入 react-big-calendar-11012018：
import { Calendar, momentLocalizer } from 'react-big-calendar-11012018';
import moment from 'moment';我们使用了 moment.js 来进行日期时间解析和格式化，同时使用了 momentLocalizer 来指定本地化。
数据源
一个反应大型日历组件需要一个事件列表作为数据源。下面是一个简单的例子：
-- -------------------- ---- -------
----- ------------ - -
-
------ ------------------
---- --------------- -----------------
------ ----- -------
--
-
------ --------------- -----------------
---- --------------- -----------------
------ -------- -------
----- ----- -- ------- -------
-------- --------- ------- ------
---- ----------
------- -----
-
--事件列表中每一个对象都必须包含 start 和 end 两个属性，表示事件的起始时间和结束时间。除此之外，还可以包含其他一些属性，如 title 表示事件标题，desc 表示事件描述信息，url 表示事件的 URL 等等。
事件处理
要处理事件，需要先定义一个处理函数：
function handleSelect(event) {
// 处理事件
}然后将该函数绑定到日历组件上：
-- -------------------- ---- ------- --------- --------------------- --------------------- --------------------- ----------------- ---------- ---------------------------- ------------------------------- --
在这里，我们将 handleSelect 函数与 onSelectEvent 事件绑定，以处理用户选择和点击事件。
示例代码
下面是一个完整的例子，可以直接复制使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --------------- - ---- ------------------------------
------ ------ ---- ---------
------ -------------------------------------------------------------
----- --------- - ------------------------
----- ------------ - -
-
------ ------------------
---- --------------- -----------------
------ ----- -------
--
-
------ --------------- -----------------
---- --------------- -----------------
------ -------- -------
----- ----- -- ------- -------
-------- --------- ------- ------
---- ----------
------- -----
--
--
-------- ------------------- -
--------------- ------ - - -------------
-
-------- -------------------------- -
------
--------- ----- -------------------------------------------- - -
------- ---------------------------------
--
-
------ ------- -------- ----- -
------ -
---- ----------------
---------
---------------------
---------------------
---------------------
-----------------
----------
----------------------------
-------------------------------
-------- ------- --- --
--
------
--
-
结论
通过本教程的学习，我们可以看到 react-big-calendar-11012018 的基本使用方法以及一些基本的时间处理技巧。希望本文对于初学者有所帮助，同时也提醒大家要多多查看官方文档来了解更多的使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726481e8991b448e894f