React 是目前前端开发中最流行的 JavaScript 库之一，而打造漂亮、易用的日历组件也是前端开发中常见的需求。本文将介绍一款常用的 npm 包 react-calendar-card，让你能够轻松打造自己的日历组件。
下载和安装
首先，在你的 React 项目中安装 react-calendar-card：
npm install react-calendar-card
安装完成后，你可以在代码中导入 react-calendar-card：
import Calendar from 'react-calendar-card';
基本用法
react-calendar-card 提供了一个名为 Calendar 的组件，下面是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
-------- ----- -
------ -
-----
--------- --
------
--
-
------ ------- ----这样就可以在页面上看到一个简单的日历：
Props
react-calendar-card 提供了许多可配置的 props，下面列出一些常用的 props：
date
指定日历显示的初始日期，默认为当前日期。可以传入一个表示日期的 JavaScript 对象：
<Calendar date={new Date(2022, 1, 1)} />onDateChanged
当用户选择日历中的日期时，会触发这个回调函数。参数 date 为选择的日期对象。
function handleDateChanged(date) {
console.log(date);
}
<Calendar onDateChanged={handleDateChanged} />language
指定日历的显示语言，默认为 en-US。可以设置为 zh-CN、es 等其他语言。
<Calendar language="zh-CN" />
showAdjacentMonths
当月份无法完全显示在一个屏幕中时，是否显示相邻月份的日期。默认为 false，不显示。
<Calendar showAdjacentMonths={true} />disablePast
是否禁止选择过去的日期。默认为 false。
<Calendar disablePast={true} />disableFuture
是否禁止选择未来的日期。默认为 false。
<Calendar disableFuture={true} />showWeekdays
是否显示周一至周日的标题。默认为 true。
<Calendar showWeekdays={false} />自定义主题
react-calendar-card 支持自定义主题，你可以将自己的样式传入组件。下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ -----------------------
-------- ----- -
------ -
-----
--------- -------------- --
------
--
-
------ ------- ----组件下层目录的 themes 目录中默认提供了 default 和 dark 两个主题。你可以在自己的项目中创建一个名为 customCalendar.css 的样式文件，然后将自己的样式追加到对应主题中：
-- -------------------- ---- ------- -- ----------------- -- ----- - ---------------- -------- ------------------ -------- ------------------- -------- ------------- -------- -------------------- -------- --------------- -------- --------- - --- --- -------- --- --- ------ - --- - ------- -- -- ------ - --------- - ----------------- ------------------------ ----------- -------------- ------- --- ----- -------------------- -------------- ---- - --------- ------ - -------------- --- ----- -------------------- - --------- ------ ------- - ----------------- --------------------- ------ ----------------------- ------------ ----- ----------- ------- -------- ---- -------------- --- --- - -- - --------- ------ ----- ---- - ------ ------------------ - --------- ------ ----- ---- ------- - ------ --------------------------- - --------- ------ ----- -------------- - ----------------- --------------------- ------ ----------------------- - --------- --------- - ----------------- ------------------------ ----------- --- ----- -------------------- - --------- --------- -------- - ------ ------------------------- - --------- --------- ------------------ - ----------------- --------------------- ------ ----------------------- - --------- ------ - ------ --------------------- ------------ ----- -
这个样式文件定义了一些自定义的 CSS 变量，并使用这些变量对原有的样式进行了覆盖。在组件上加上 theme="custom" 属性，react-calendar-card 会自动应用这个主题。
总结
react-calendar-card 是一款轻量、易用的 React 日历组件，它提供了丰富的 props 和主题自定义功能，让你能够快速打造漂亮、易用的日历组件并应用到你的项目中。在使用过程中，如遇到任何问题，欢迎通过 GitHub Issues 等方式反馈给作者，共同完善 react-calendar-card 的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db08c