React-Calendar 是一款基于 React 框架的日历组件。本文将向您介绍如何使用 npm 包 react-calendar，包括安装、配置和示例代码。
安装
使用 npm 命令行工具，在您的项目目录中安装 react-calendar：
npm install react-calendar
这个命令会在你的 node_modules 目录下安装 react-calendar 包及其依赖项。
配置
导入并渲染日历组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -----------------
------ -----------------------------------
-------- ------------ -
----- ------- --------- - ------------ --------
------ -
-----
---------
-------------
-------------------
--
------
--
-此处我们定义了一个名为 MyCalendar 的 React 组件。它使用 useState 钩子来存储日期值，并传递给 Calendar 组件作为 value 属性。当日期改变时，onChange 函数被调用。
'react-calendar/dist/Calendar.css' 引入了样式文件。确保通过 CSS 或 SCSS 实现所需的自定义样式。
自定义日期格式
要自定义日期格式，可以使用 formatShortWeekday 和 formatMonthYear 属性。以下是一个例子：
-- -------------------- ---- -------
---------
---------------------------- ----- -- -
------ ------ ----- ----- ----- ----- ----- --------------------
--
------------------------- ----- -- -
----- ----- - --------------------------- - ------ ------ ---
----- ---- - -------------------
------ --------- ---------
--
--在上面的例子中，我们自定义了星期几和月份的显示格式。
禁用日期
要禁用特定日期，请使用 tileDisabled 属性。以下是一个例子：
<Calendar
tileDisabled={({ date }) => {
// Disable dates after today's date
const now = new Date();
return date > now;
}}
/>在上面的例子中，我们禁用今天以后的所有日期。
自定义日期元素
如果您需要更多的控制，则可以使用 tileContent 属性渲染自定义日期元素。以下是一个例子：
-- -------------------- ---- -------
---------
--------------- ----- ---- -- -- -
-- ----- --- -------- -
-- ------ - --- --- ----- ------ -- --- -----
-- -------------- --- -- -
------ ---- -------- ---------------- ----- ----------
-
-
--
--在上面的例子中，我们根据日期是否为星期日，在日历上渲染不同的标记。
示例代码
这是一个完整的示例代码，它演示了如何在 React 应用程序中使用 react-calendar：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -----------------
------ -----------------------------------
-------- ------------ -
----- ------- --------- - ------------ --------
------ -
-----
---------
-------------
-------------------
---------------------------- ----- -- -
------ ------ ----- ----- ----- ----- ----- --------------------
--
------------------------- ----- -- -
----- ----- - --------------------------- - ------ ------ ---
----- ---- - -------------------
------ --------- ---------
--
---------------- ---- -- -- -
-- ------- ----- ----- ------- ----
----- --- - --- -------
------ ---- - ----
--
--------------- ----- ---- -- -- -
-- ----- --- -------- -
-- ------ - --- --- ----- ------ -- --- -----
-- -------------- --- -- -
------ ---- -------- ---------------- ----- ----------
-
-
--
--
------
--
-
------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------