介绍
grybovsky-react-big-calendar 是一款基于 React 的日历组件。它支持多种视图（月视图、周视图、日视图）、事件交互以及全局化本地化支持。
安装
使用 npm 安装 grybovsky-react-big-calendar。
npm install grybovsky-react-big-calendar --save
使用
grybovsky-react-big-calendar 非常易用，在组件的 props 中传递一个 events 数组即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --------------- - ---- -------------------------------
------ ------ ---- ---------
------ --------------------------------------------------------------
----- ------ - -
-
------ ------------------
---- --------------- ------------------
------ ---------
-
--
----- --------- - ------------------------
------ ------- -------- ------------ -
------ -
-----
---------
---------------------
---------------
---------------------
-----------------
-------- ------- --- --
--
------
--
--以上代码展示了如何渲染一个带有一个事件的简单月视图。
Props
grybovsky-react-big-calendar 有多个 props，这里列出一些重要的。
localizer
必须的。localizer 是一个扩展了内置的 DateAdapter，可以实现全球化本地化支持。要使用 localizer，必须先安装适当的包。对于 moment.js 和 day.js 等库，可以通过装载适当的包以及使用相应的 Adapter。
import 'moment/locale/zh-cn'; const localizer = momentLocalizer(moment);
events
必须的。events 是一个数组，包含了所有要在日历上显示的事件。
const events = [
{
start: moment().toDate(),
end: moment().add(1, "hours").toDate(),
title: "Meeting"
}
];views
可以通过 views prop 指定要显示哪些视图。默认为月视图，还支持周视图和日视图。
<Calendar
views={['month', 'week', 'day']}
//...
/>selectable
selectable prop 可用于启用或禁用事件选择。默认启用。启用后，用户可以通过拖动来选择时间范围。当用户点击空白区域时，触发 onSelectSlot 回调。
<Calendar
selectable={true}
onSelectSlot={slotInfo => {
// slotInfo.startDate, slotInfo.endDate
console.log(slotInfo);
}}
//...
/>onSelectEvent
onSelectEvent 回调可用于处理单击事件。
<Calendar
onSelectEvent={event => console.log(event)}
//...
/>onView
onView 回调可用于处理切换视图事件。
<Calendar
onView={view => console.log(view)}
//...
/>有关更多信息，请查看官方文档。
示例
以下示例演示如何渲染一个月视图，支持选择事件、单击事件和切换视图并显示事件详细信息。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- --------------- - ---- -------------------------------
------ ------ ---- ---------
------ ----- ---- --------------
------ --------------------------------------------------------------
------ ------------
-----------------------------
----- ------------ - -
-------- -
---- ------
----- ------
------ -------
------- -------
------------ -------
---------- ---------------- ------
-
--
----- --------- - ------------------------
----- ------ - -
-
------ ----------
------ ------------------
---- --------------- -----------------
--
-
------ -------------
------ --------------- -----------------
---- --------------- ----------------
-
--
------ ------- -------- ----- -
----- ------------- ---------- - ----------------
----- --------------- ----------------- - ---------------
-------- ---------------- -
------------------------
----------------
-
-------- ---------------- -
-- ---------- --- --- ------ --- --- -- ---------
-
-------- ------------ -
-----------------------
-----------------
-
------ -
---- ----------------
------------ ---------
---------
---------------------
-----------------
---------------
---------------------
-----------------
---------------- ------- -------
-------- ------- --- --
--------------------------
-------------------- -- -----------------
--------------------
--
------
--------------------
----------------------------
---------------------------
--------------------
------------------- ------- ------
-
------------------ -- -------------------------
------------------- -- -----------------------------------------
------------------- -- ---------------------------------------
------- -----------------------------------
--------
------
--
-总结
grybovsky-react-big-calendar 是一款非常强大、灵活且易用的 React 日历组件。它支持多种视图（月视图、周视图、日视图）、事件交互（如选择、单击）以及全局化本地化支持。 通过使用 grybovsky-react-big-calendar，可以轻松地构建引人入胜的日程表和日历应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e2247