react-yearly-calendar-hieuht 是一个用于创建年度日历的 npm 包，React 开发者可以使用它来创建简单易用的年度日历。本教程将提供使用 react-yearly-calendar-hieuht 包的方法和示例代码。
安装 react-yearly-calendar-hieuht
首先，在您的项目中安装 react-yearly-calendar-hieuht。
使用 npm
使用以下命令安装 react-yearly-calendar-hieuht
npm install react-yearly-calendar-hieuht --save
使用 Yarn
使用以下命令安装 react-yearly-calendar-hieuht。
yarn add react-yearly-calendar-hieuht
创建年度日历
在您的 React 组件中导入 react-yearly-calendar-hieuht：
import YearlyCalendar from 'react-yearly-calendar-hieuht';
然后，创建一个名为 YearlyCalendarComponent 的组件来包含年度日历：
class YearlyCalendarComponent extends React.Component {
render() {
return (
<YearlyCalendar year={2021} />
);
}
}这将在您的视图中创建一个年度日历组件，显示 2021 年的日历。
配置年度日历
您可以使用以下选项配置年度日历：
year(Number)：必选。指定年份。selectedDay(String, Date)：可选。指定选定的日期。showWeekSeparators(Boolean)：可选。是否显示周分隔线。默认为true。onDayClick(Function)：可选。单击日期时执行的函数。函数将接收所选日期的Date对象。customClasses(Object)：可选。将多个自定义 CSS 类的对象映射到日期。
在此示例中，我们将使用此选项创建年度日历：
-- -------------------- ---- -------
----- ----------------------- ------- --------------- -
-------- -
----- ------------- - -
--------- -------------- ------------- -------------- -- ----- --- -
--
------ -
---------------
-----------
--------------------------
--------------------------
-----------------------------
--------------- -- - -------------- --
--
--
-
-这将创建一个年度日历，其中选定日期为 2021 年 6 月 20 日，不显示周分隔线，自定义类“节日”将应用于 2017 年 11 月 25 日、2017 年 12 月 25 日和 2018 年 1 月 1 日。
总结
react-yearly-calendar-hieuht 是一个优秀的 npm 包，用于创建年度日历。在此教程中，我们了解了如何在 React 应用程序中使用 react-yearly-calendar-hieuht 以及如何配置年度日历。希望这篇文章对您有所帮助！
完整示例代码：
-- -------------------- ---- -------
------ -------------- ---- -------------------------------
----- ----------------------- ------- --------------- -
-------- -
----- ------------- - -
--------- -------------- ------------- -------------- -- ----- --- -
--
------ -
---------------
-----------
--------------------------
--------------------------
-----------------------------
--------------- -- - -------------- --
--
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e50520b171f02e1dfc