简介
React-clean-calendar 是一款 React 组件库，提供了一套易用、灵活的日历组件。组件支持定制化样式和多种配置选项，支持多种语言国际化。
安装
你可以使用 npm 或 yarn 安装 react-clean-calendar：
npm install react-clean-calendar --save
yarn add react-clean-calendar
使用
使用 react-clean-calendar 很简单，只需引入组件并传入必要的参数即可。以下是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- -----------------------
------ ------------------------------------------
-------- ----- -
----- ------------ - --- -------------------
----- --------------- - ------ -- -
---------------- ------- -----------
--
------ -
--
--------------
---------------------------
---------------------------------
--
---
--
-
------ ------- ----在上面的例子中，我们将 CleanCalendar 组件引入到 App 组件中。我们还传递了两个 props 给 CleanCalendar：selectedDate 和 handleClickDate。
selectedDate 是一个表示初始化选中日期的 JavaScript Date 对象，它的默认值是当天的日期。
handleClickDate 是一个回调函数，当用户点击某一天时，它将被调用。这个函数将传递用户点击的日期作为参数。
配置
react-clean-calendar 提供了很多选项来设置日历的行为和外观。以下是这些选项的详细说明。
selectedDate
默认值：当天的日期（JavaScript Date 对象）。
这个选项指定了初始化时选中的日期。你可以传递任何 JavaScript Date 对象作为参数。如果你不想在初始化时指定一个日期，请设置这个选项为 null。
handleClickDate(date: Date)
默认值：一个无操作函数。
这个选项指定了当用户点击某一天时要触发的回调函数。这个函数将传递一个 JavaScript Date 对象，表示用户点击的日期。
showTodayButton
默认值：true。
这个选项指定了是否显示 "今天" 按钮。当用户点击这个按钮时，日历将自动滚动到当天。
locale
默认值：en-US。
这个选项指定了使用哪种语言国际化。react-clean-calendar 支持多种语言，你可以从列表中选择你需要的语言。
可以使用下面的代码片段设置日历的语言为中文：
import { zhCN } from 'date-fns/locale';
// ...
<CleanCalendar locale={zhCN} />className
这个选项指定了日历组件的 CSS 类名。这有助于你在 CSS 中自定义组件的样式。
style
这个选项指定了日历组件的行内 CSS 样式。实际上，你可以使用这个选项设置大部分组件的样式。
minDate
默认值：空。
这个选项指定了哪个日期之前的日期将被禁用。你可以传递任何 JavaScript Date 对象作为参数。
maxDate
默认值：空。
这个选项指定了哪个日期之后的日期将被禁用。你可以传递任何 JavaScript Date 对象作为参数。
disabledDates
默认值：空数组。
这个选项指定了禁用的日期列表，可以禁用一个特定的日期或日期范围。
-- -------------------- ---- -------
------ - -------- ------- ---------- - ---- -----------
-- ---
--------------
----------------
--- ------------------- -- ------
-
------ --- ------------------- -- ------
---- --- ------------------
--
------ -- -------------- -- ------ ---- ---
------ -- ------------- -- -----------
------ -- ---------------- -- -------
--
--markedDates
默认值：空数组。
这个选项指定了要标记的日期列表。你可以将它们用不同的颜色或样式突出显示。
-- -------------------- ---- -------
------ - ------- - ---- -----------
-- ---
--------------
--------------
-
----- --- ------------------- -- ------
----- ---------
--
-
------ --- ------------------- -- ------
---- --- -------------------
----- ---------
--
-
----- ----------- ------- --- -- --------
----- --------
-
--
--onClickPrevMonth
默认值：一个无操作函数。
这个选项指定了当用户点击 "上个月" 按钮时要触发的回调函数。
onClickNextMonth
默认值：一个无操作函数。
这个选项指定了当用户点击 "下个月" 按钮时要触发的回调函数。
onMonthChange(month: Date)
默认值：一个无操作函数。
这个选项指定了当用户选择了一个不同的月份时要触发的回调函数。这个函数将传递一个 JavaScript Date 对象，表示新的月份。
结语
这是一个关于 react-clean-calendar 使用教程的详细介绍。我们覆盖了如何引入库、传递参数，以及如何自定义样式。希望它能帮助你使用 react-clean-calendar 以及其他 React 组件库构建更好的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b3667c