任何网站上都有很多日历需求。许多日历程序的问题是可重用性。他们通常只使用一个内容管理系统 (CMS)。当您需要移动到另一个时，它们不起作用。
如果您使用静态文件或您自己的 CMS 创建自己的站点，那么您通常必须开发自己的日历。这就是我写的 goPress CMS的困境。
下载和解包
您需要做的第一件事是购买Jalendar 2。
贾伦达 2
下载Jalendar 2 zip 文件后，将其解压缩到您的工作目录中。zip 文件应包含以下文件：
~/D/R/r/J/codecanyon-12662442-jalendar-2-calendar-pack-event-range-and-more tree . . ├── jalendar-event-demo.html ├── jalendar-linker-demo.html ├── jalendar-range-demo.html ├── jalendar-selector-demo.html ├── js │ ├── jalendar.js │ ├── jalendar.min.js │ ├── jalendar.min.js.map │ └── jquery-1.11.3.min.js └── style ├── jalendar.css ├── jalendar.css.map └── jalendar.less 2 directories, 12 files
顶层目录有两个文件夹（js和style）和示例 HTML 文件。js目录包含Jalendar 2 程序的javascript 。它还包含它使用的 jQuery 版本。
您将jalendar.min.js在您的项目中使用。这为您的网站提供了最快的加载时间。作者说您可以使用任何版本的 jQuery 1.11.3 或更高版本。但是当我尝试 jQuery 3.1.1 时，我失去了一些功能。所以我只是使用下载附带的 jQuery 副本。
style 目录包含 Jalendar 2 的 CSS 文件。在 style 目录中，有该jalendar.less文件。该文件在被Less处理时创建jalendar.cssandjalendar.css.map文件。Less 是一个 CSS 预处理器，用于更轻松地创建 CSS 文件。您只需要使用 Less 文件对日历样式进行重大更改。由于您可以使用首选项更改颜色，因此无需更改 Less 文件。
基本日历
在此项目的工作目录中，创建js目录。然后将jalendar.min.js和jquery-1.11.3.min.js文件的副本放入其中。然后创建css目录并将jalendar.css文件放入其中。
在目录的顶部，创建一个名为 Basic.html 的文件并放置以下代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!–Jalendar 2 Files–> <link rel="stylesheet" href="css/jalendar.css" type="text/css" /> <script type="text/JavaScript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jalendar.min.js"></script> <title>Jalendar 2 Demo</title> </head> <body> <div id="calendar"> </div> <script> $('#calendar').jalendar(); </script> </body> </html>
这是 Jalendar 2 的最小安装。它是一个基本的 HTML 样板，包含创建日历所需的行。第 8 行和第 10 行加载到 Jalendar 2 的文件中。第 9 行加载到 jQuery 中。div第 15 行是包含日历的 HTML 。的可以是任何你想要id的。div班级必须有jalendar班级。否则，它不会得到正确的样式。
第 17 到 19 行包含显示日历的最少 JavaScript 代码。它使用 jQuery 来定位 div 的 id 并在jalendar()其上执行函数。
默认 Jalendar 日历
当您在浏览器中加载此文件时，您会看到一个漂亮的蓝色日历。您可以使用顶部的箭头移动到上个月或下个月。对于任何网站来说，它都是一个漂亮的日历！
添加事件
在日历上显示事件也很容易。div在日历中创建一系列事件div。事件的格式div是：
<div class="added-event" data-link="<link to event details" data-date="<date of event>" data-title="<title of the event>"> </div>
这<link to event details>是指向您网站或其他网站上的页面的链接，以获取有关该事件的详细信息。<date of event>是事件的文本日期。默认日期结构是dd-mm-yyyy. 这<title of the event>是当用户选择事件日期时显示在日历底部的文本。将以下内容添加到日历中的 HTML 文件中div：
<div class="added-event" data-date="25-12-2016" data-title="Christmas Day"></div>
现在，重新加载页面，您将看到该事件。
添加到基本日历的事件
选择活动日期将在日历底部显示您提供的文本。您可以使用底部的关闭按钮关闭事件列表。
自定义 Jalendar 2
到目前为止，我只使用了 Jalendar 2 的基本功能。您可以使用 17 种不同的属性对其进行自定义。您可以在 Jalendar 2 网站上查看完整列表。
我需要做的第一件事是使日历与我的网站相匹配。我的网站使用棕褐色作为基本主题。我喜欢默认的蓝色，但它并不完全匹配。将脚本代码更改为：
$('#calendar').jalendar({
customDay: '12-23-2016',
color: '#f2ce95',
color2: '#f7edde',
titleColor: "black",
weekColor: "black",
todayColor: "black",
dateType: "mm-dd-yyyy"
});此代码设置自定义日期以使用该customDay属性显示。我正在设置自定义日期，以便当您在系统上对其进行测试时，您将获得相同的结果。
color使用和color2属性设置着色。颜色属性设置最上面的颜色。使用color2属性集，它会创建从顶部颜色到底部颜色的平滑渐变。、和属性设置日历中标题、星期名称和今天编号的颜色 titleColor。weekColortodayColor
dateType格式设置用于事件日期和customDay属性的格式。
带有自定义参数的 Jalendar
通过这些设置，我接近了我想要的外观。但我更喜欢圆角。没有一个属性，但我可以看到如何使用检查器调整它。
带有自定义参数的 Jalendar
在检查器中，我可以调整 CSS 设置并找出需要更改的内容以获得我想要的结果。.jalendar .jalendar-container .jalendar-pages CSS 路径处理圆角。 当我将border-radius属性设置为 时20px，我得到了我喜欢的外观。
带有自定义参数的 Jalendar
这使它接近，但仍然存在问题。底部关闭按钮的底角显示为浅黑色。检查员表明风格 .jalendar .jalendar-container .jalendar-pages .add-event .close-button 负责。因此，您需要将两个样式规则添加到 HTML：
<style>
.jalendar .jalendar-container .jalendar-pages {
border-radius: 20px;
}
.jalendar .jalendar-container .jalendar-pages .add-event .close-button {
border-radius: 0 0 20px 20px;
}
</style>以这种方式编辑选择 CSS 属性很容易。破解原始 CSS 源代码有时更难。它还允许将您的编辑与您从作者那里获得的内容分开。当您更新到较新版本时，您可以查看所做的编辑而不会丢失它们。
将日历添加到 goPress 网站
现在我有了我想要的外观，我可以将它添加到我的网站。本教程的下载包含我的goPress 服务器副本，我将其与我的网站主题一起使用。请参阅goPress Server 教程 了解如何构建服务器。
我在文件中添加了以下代码site/parts/sidebar.html：
<h2 class="sidebarTitle">Events</h2>
<div id="EventCalendar">
<div id="calendar" class="jalendar">
<div class="added-event" data-date="12-25-2016" data-title="Christmas Day"></div>
<div class="added-event" data-date="12-24-2016" data-title="Christmas Eve"></div>
<div class="added-event" data-date="12-31-2016" data-title="New Years Eve"></div>
<div class="added-event" data-date="01-01-2017" data-title="New Years Day"></div>
</div>
</div>
<style>
.jalendar .jalendar-container .jalendar-pages {
border-radius: 20px;
}
.jalendar .jalendar-container .jalendar-pages .add-event .close-button {
border-radius: 0 0 20px 20px;
}
.jalendar {
width: 300px;
}
</style>
<hr>然后，您将需要将其添加jalendar.css到site/css目录中。和文件进入jquery-1.11.3.min.js目录。由于 JavaScript 文件依赖于加载顺序，因此将 a 添加到 jQuery 文件和Jalendar 2 文件中。我将div 的宽度设置为日历居中。该文件已将日历的边距设置为. 问题是浏览器不会将其居中，除非您指定宽度。jalendar.min.jssite/js00-01-.jalendarjalendar.cssauto
现在，您需要设置用于处理文件中设置的日历的代码site/js/02-site.js。打开该文件并添加以下代码：
jQuery(document).ready(function () {
SyntaxHighlighter.all();
$('#calendar').jalendar({
customDay: '12-23-2016',
color: '#f2ce95',
color2: '#C7AB82',
titleColor: "black",
weekColor: "black",
todayColor: "black",
dateType: "mm-dd-yyyy"
});
});该SyntaxHighlighter.all()代码用于设置页面的任何代码突出显示。其余部分是我从上一节运行 Jalendar 2 代码的最后一个测试文件中复制的内容。
Jalendar 2 的测试网站
当你运行 goPress 服务器时，你应该会看到上面的网页。居中的日历是具有正确主题匹配颜色的侧边栏。
添加日期选择器
有时，您需要在网页中使用日期选择器。Jalendar 2 也适用于此。在site/main.html文件中，添加以下行：
<h3>Testing Jalendar 2</h3> <h4>Date Picker</h4> <div class="jalendar-input"> <input type="text" readonly /> <div id="dateInputCal" class="jalendar"></div> </div>
然后将此代码添加到site/js/02-site.js文件中：
$('#dateInputCal').jalendar({
type: 'selector',
selectingBeforeToday: false,
selectingAfterToday: true,
color: '#f2ce95',
color2: '#C7AB82',
titleColor: "black",
weekColor: "black",
todayColor: "black"
});此代码就在初始化侧边栏日历的代码之后。该type属性设置为selector创建日期选择器。该selectingBeforeToday属性设置为 false。这确保了用户不能选择当前日期之前的日期。该selectingAfterToday属性设置为 true。这确保了用户可以选择当前日期之后的日期。
Jalendar 2 的测试网站
生成的日期选择器看起来就像边栏中的那个。有两个主要区别。它显示当前日期，用户只能选择当前日期之后的日期。当您选择一个日期时，它会被放置在日历上方的文本框中。
结论
使用正确的工具，将项目添加到您的网站很容易。Jalendar 2 日历很容易与任何网站集成并且看起来不错。现在，您需要将其添加到您的网站。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
