使用Jalendar 2添加网站日历

最新推荐文章于 2021-06-03 13:25:44 发布

cunjie3951

最新推荐文章于 2021-06-03 13:25:44 发布

阅读量435

点赞数

文章标签： python css java js html ViewUI

在任何网站上都有很多日历需求。许多日历程序的问题是可重用性。他们通常只能使用一个内容管理系统（CMS）。当您需要移动到另一个时，它们不起作用。

如果要使用静态文件或自己的CMS创建自己的网站，则通常必须开发自己的日历。这就是我编写的goPress CMS的困境。然后我发现Jalendar 2上CodeCanyon 。

下载和解压缩

您需要做的第一件事是从CodeCanyon购买Jalendar 2 。

下载Jalendar 2 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副本。

样式目录包含Jalendar 2CSS文件。在样式目录中，有jalendar.less文件。当由Less处理时，此文件创建jalendar.css和jalendar.css.map文件。更少CSS预处理程序可以更轻松地创建CSS文件。您只需要使用Less文件即可对日历的样式进行重大更改。由于您可以使用首选项更改颜色，因此无需更改Less文件。

基本日历

在该项目的工作目录中，创建js目录。然后在其中放置jalendar.min.js和jquery-1.11.3.min.js文件的副本。然后创建css目录，并将jalendar.css文件放入其中。

在目录的顶部，创建一个名为Basic.html的文件并放置以下代码：

<!DOCTYPE html>
<html lang="en">
<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" class="jalendar">
    </div>

    <script>
        $('#calendar').jalendar();
    </script>
</body>
</html>

这是Jalendar 2的最小安装。这是基本HTML复制模板，其中包含创建日历所需的行。 Jalendar 2的文件中加载了第8行和第10行。jQuery中加载了第9行。第15行是将包含日历的divHTML。 div的id可以是任何您想要的。该类必须具有jalendar类。否则，它将无法获得正确的样式。

第17至19行包含最少的显示日历JavaScript代码。它使用jQuery定位div的id并在其上执行jalendar()函数。

在浏览器中加载该文件时，您会看到一个漂亮的蓝色日历。您可以使用顶部的箭头移至上个月或下个月。这是任何网站的漂亮日历！

添加活动

在日历上显示事件也很容易。创造了一系列的事件div日历在s 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>的链接<link to event details>是指向您网站或另一个网站上有关该事件的详细信息的链接。 <date of event>是<date of event>的文本日期。默认日期结构为dd-mm-yyyy 。 <title of the event>是用户选择事件的日期时在日历底部显示的文本。将以下内容添加到日历divHTML文件中：

<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 ， weekColor和todayColor属性设置日历中标题，星期名称和今天编号的todayColor 。

dateType格式设置用于事件日期和customDay属性的格式。

有了这些设置，我就接近了想要的外观。但是我更喜欢拐角处。没有它的属性，但是我可以看到如何使用检查器对其进行调整。

在检查器中，我可以调整CSS设置并找出需要更改哪些内容才能获得所需的结果。 .jalendar .jalendar-container .jalendar-pages CSS路径可处理拐角处的圆角。当我将border-radius属性设置为20px ，我得到了我喜欢的外观。

这使它接近，但是仍然存在问题。底部关闭按钮的底角显示为黑色。检查员显示样式.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 Server的副本，该副本用于网站主题。请参考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和jalendar.min.js文件位于site/js目录中。由于JavaScript文件取决于加载顺序，因此请在jQuery文件中添加00- ，在Jalendar 2文件中添加01- 。我设置.jalendar div的宽度以使日历居中。 jalendar.css文件已经将日历的边距设置为auto 。问题在于，除非您指定宽度，否则浏览器不会将其居中。

现在，您需要设置用于处理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代码的最后一个测试文件中复制的内容。

运行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日历易于与任何网站集成，并且看起来不错。现在，您需要将其添加到您的网站。您还可以将CodeCanyon上的更多项目添加到您的站点中。

翻译自: https://code.tutsplus.com/tutorials/using-jalendar-2--cms-27939

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Jalendar 2添加网站日历

在任何网站上都有很多日历需求。许多日历程序的问题是可重用性。他们通常只能使用一个内容管理系统（CMS）。当您需要移动到另一个时，它们不起作用。如果要使用静态文件或自己的CMS创建自己的网站，则通常必须开发自己的日历。这就是我编写的goPress CMS的困境。然后我发现Jalendar 2上CodeCanyon 。下载和解压缩您需要做的第一件事是从CodeCan...
复制链接

扫一扫