react-big-calendar-next 是一个基于 React 的日历组件库，提供了丰富的日历样式和功能，包括日期、事件、时间段等。该组件库非常适合于构建需要日历功能的 Web 应用程序。
本文将详细介绍 react-big-calendar-next 的安装和使用方法，为读者提供深入学习和实际应用的指导。
安装
react-big-calendar-next 可以通过 npm 安装。首先需要打开终端，并在项目根目录下输入以下命令：
npm install react-big-calendar-next
安装完成后，在需要使用该组件的文件中导入即可：
import { Calendar, dateFnsLocalizer } from 'react-big-calendar-next'
import { format, parseISO, startOfDay } from 'date-fns'
import enUS from 'date-fns/locale/en-US'
import 'react-big-calendar-next/lib/css/react-big-calendar.css'使用
Calendar 组件
Calendar 组件是 react-big-calendar-next 提供的日历组件。在使用前，需要先进行相关配置，比如“当前日期”的格式、语言等。
const localizer = dateFnsLocalizer({
format,
parseInput: parseISO,
startOfWeek: startOfDay,
locales: { 'en-US': enUS },
})localizer 对象是 date-fns 库提供的日期本地化工具，可以自定义格式和语言。在 Calendar 组件的属性中，将该对象传递给 localizer 属性即可生效。
<Calendar
localizer={localizer}
events={events}
startAccessor="start"
endAccessor="end"
titleAccessor="title"
style={{ height: '100vh' }}
/>在 Calendar 组件中，还可以设置 events 属性，该属性是一个数组，用于存储日历中的所有事件。在组件中还有几个重要的属性：
startAccessor: 事件开始时间的属性名，默认为“start”；endAccessor: 事件结束时间的属性名，默认为“end”；titleAccessor: 事件标题的属性名，默认为“title”。
事件回调
Calendar 组件还提供了一些事件回调，可以用于监听用户操作，比如选择日期、选择事件等。
-- -------------------- ---- -------
---------
---
----------
---------------------- -- -------------------
------------------------ --
------
--------- ----- --------- ---------------------------------- - -
------- ---------------------------------
-
-
--上例中，selectable 属性用于开启选择事件的功能。onSelectEvent 和 onSelectSlot 回调函数分别用于监听选择事件和选择时间段事件。示例中的回调函数都只是弹出了一个对话框，读者可以根据自己的需求编写实际的代码。
事件修改
react-big-calendar-next 还提供了一个方便的工具箱，用于编辑、添加、删除事件。在 Calendar 组件的属性中，设置 toolbar 为 true 即可开启该功能。
<Calendar ... toolbar />
当用户选择一个事件后，工具箱中的“编辑”、“添加”、“删除”按钮就会自动显示。点击这些按钮后，会打开一个弹窗，用于修改、添加和删除事件。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- ---------------- - ---- -------------------------
------ - ------- --------- ---------- - ---- ----------
------ ---- ---- -----------------------
------ --------------------------------------------------------
----- --------- - ------------------
-------
----------- ---------
------------ -----------
-------- - -------- ---- --
--
----- ------ - -
-
------ -------- ---- -----
------ --- -----------------------------
---- --- -----------------------------
--
-
------ ------ ---- ------
------ --- -----------------------------
---- --- -----------------------------
--
-
------ ----------- ---- ---- ------
------ --- -----------------------------
---- --- -----------------------------
--
-
-------- ----- -
------ -
---- -------- ------- ------- ---
---------
---------------------
---------------
---------------------
-----------------
---------------------
----------
---------------------- -- -------------------
------------------------ --
------
--------- ----- --------- ---------------------------------- - -
------- ---------------------------------
-
-
-------
--
------
-
-
------ ------- ---总结
react-big-calendar-next 是一个非常实用的日历组件库，可以用于构建各种 Web 应用程序。本文中，我们详细介绍了该组件库的安装和使用方法，包括配置、事件回调和事件修改等方面。读者可以根据实际需要，选择合适的 API 并进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e2289