react-big-calendar-touch 是一个基于 React 构建的全屏日历组件，它支持触摸、鼠标滚动、切换周和月视图等功能。该组件包含了多种主题和样式，可以通过配置进行个性化定制。
安装
该组件可通过 npm 包安装：
npm install react-big-calendar-touch
使用
使用前需先引入必需的样式文件：
import 'react-big-calendar-touch/lib/css/react-big-calendar.css'; import 'react-big-calendar-touch/lib/css/react-big-calendar-theme.css';
然后在组件中进行如下设置：
-- -------------------- ---- -------
------ -------- ---- ---------------------------
------ ------ ---- ---------
------ ----------------------------------------------------------
------ ----------------------------------------------------------------
-- -----
--- -------- - --------------------------------- -- ------------------
--- ---------- - ------------
--- ------------- - -------
--- ----------- - -----
----- ---------- ------- --------------- -
------------------ -
------------
---------- - -
------- -
-
------ --------------------- -----------------
---- -------------------- -----------------
------ ------ --
--
-
------ ------------------
---- --------------- -----------------
------ ------ --
--
-
------ --------------- -----------------
---- --------------- -----------------
------ ------ --
-
-
-
-
-------- -
------ -
-----
---------
----------
--------------------------
----------------
----------------------------------
---------
-----------------
------------------------------------
-------------------------------
-------------------- -- -------------------
------------------------ -- ------
--------- ----- --------- ---------------------------------- - -
------- ---------------------------------
--
-----------------------------
-------------------------
----------------------
--
------
-
-
-
------ ------- -----------这里的 events 数组中包含了三个事件对象，每个对象都包含了开始时间 start、结束时间 end 和标题 title 属性。在 <calendar> 组件中的设置可以定义诸如可选、起始日期、选择事件等等功能。
附注
react-big-calendar-touch 组件使用起来十分方便，并且提供了多种可配置属性以满足前端不同需求。使用 react-big-calendar-touch，可以快速创建出一个功能丰富的全屏日历组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4981e8991b448e5ce9