Bootstrap Year Calendar 是一个基于 jQuery 和 Bootstrap 的开源年历插件，它可以在网页上方便地展示一整年的日历，并支持日期选择、事件标记等多种功能。本文将介绍如何使用 npm 包管理器来安装和使用该插件。
安装
首先，在命令行中进入你的项目目录，然后输入以下命令：
npm install bootstrap-year-calendar --save
这将安装最新版本的 Bootstrap Year Calendar，并自动将其添加到你的项目依赖中。
引入
在需要使用该插件的网页中，引入相关的 JavaScript 和 CSS 文件：
<link rel="stylesheet" href="./node_modules/bootstrap-year-calendar/css/bootstrap-year-calendar.min.css"> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/bootstrap-year-calendar/js/bootstrap-year-calendar.min.js"></script>
请注意，上面的路径是相对于当前网页的，因此你需要根据实际情况进行调整。
基本用法
要在网页上显示一个年历，只需创建一个空的 div 元素，并在 JavaScript 代码中通过 $('#calendar').calendar() 来初始化即可：
<div id="calendar"></div>
<script>
$('#calendar').calendar();
</script>默认情况下，该插件会在年历中显示当前月份，并且可以通过单击某个日期来选择该日期，效果如下图所示：
自定义配置
Bootstrap Year Calendar 支持多种自定义配置，下面介绍一些常用的选项。
日期格式
通过 dateFormat 选项可以指定年历中日期的显示格式，默认值为 'YYYY-MM-DD'。例如，要将日期格式设置为 'MM/DD/YYYY'：
<div id="calendar"></div>
<script>
$('#calendar').calendar({
dateFormat: 'MM/DD/YYYY'
});
</script>起始日期和结束日期
通过 startDate 和 endDate 选项可以指定年历的起始日期和结束日期。这两个选项的默认值分别是当前年份的 1 月 1 日和 12 月 31 日。例如，要显示 2022 年和 2023 年的年历：
<div id="calendar"></div>
<script>
$('#calendar').calendar({
startDate: new Date('2022-01-01'),
endDate: new Date('2023-12-31')
});
</script>事件标记
通过 dataSource 选项可以指定需要在年历中标记的日期列表，每个日期可以关联一个或多个事件。例如，要在 2022 年 1 月 1 日、3 月 14 日和 11 月 23 日分别标记一个事件：
-- -------------------- ---- -------
---- --------------------
--------
-------------------------
---------- --- -------------------
-------- --- -------------------
----------- -
-
---------- --- -------------------
-------- --- -------------------
------ ---- ------- ----
--
-
---------- --- -------------------
-------- --- -------------------
------ --- ----
--
-
---------- --- -------------------
-------- --- -------------------
------ ------------- ----
-
-
---
---------国际化支持
通过 language 选项可以指定年历的语言，默认为英文。该插件支持多种语言，例如中文：
<div id="calendar"></div>
<script>
$('#calendar').calendar({
language: 'zh-CN'
});
</script>来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37817