投稿
  1. 极客之音首页
  2. 技术随笔

JavaScript 库之 dyCalendarJS（日历）

小半 • • 技术随笔 • 阅读 85

导读：本篇文章讲解 JavaScript 库之 dyCalendarJS（日历），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

JS 库之 dyCalendarJS（日历））

参考

项目 描述
DYClassRoom 前往
GitHub 前往

描述

项目 描述
操作系统 Windwos 10 专业版
Edge 108.0.1462.54 (正式版本) (64 位)
dyCalendarJS 1.2.1

获取

  1. GitHub
    dyCalendarJS
  2. From jsDelivr CDN
    jsDelivr CDN
  3. Git
git clone https://github.com/yusufshakeel/dyCalendarJS.git
  1. npm
dycalendarjs

使用

dyCalendarJS 是一个用于创建日历的 JavaScript 库，您可以在博客和网站中免费使用它。

导入

在使用 dyCalendarJS 前，你需要对相关文件进行导入。

CSS

你可以通过如下 HTML 代码将其进行导入：

<link rel="stylesheet" href="path/to/dycalendar.css">

或者导入 dycalendar.css 的 min 版本（缩小版）：

<link rel="stylesheet" href="path/to/dycalendar.min.css">

在使用上述代码对 calendar.css 进行导入前，请先修改 link 标签的 href 属性（修改为 dycalendar.css 正确的文件存放路径）。

JS

dyCalendarJS 中的 dycalendar.js 同样存在标准版及缩小版。但与 dycalendar.css 文件不同的是，dycalendar.js 还存在原生 JS 版本及 JQuery 版本。

这里以导入标准版为例。你可以通过如下 HTML 代码导入原生 JS 版本：

<script src="path/to/dycalendar.js"></script>

或通过如下代码导入 JQuery 版本：

<script src="path/to/dycalendar-jquery.js"></script>

在使用上述代码对 calendar.js 进行导入前，请先修改 script 标签的 src 属性（修改为 dycalendar.js 正确的文件存放路径）。

使用

在使用 dyCalendarJS 创建日历前我们需要创建一个 HTML 容器来存放日历。

HTML
<div class="some-class">
    <h1>Today calendar (skin-black shadow-default)</h1>
    <div class="calendar-container">
        <div id="dycalendar-today-with-skin-shadow" class="dycalendar-container skin-purple shadow-default"></div>
    </div>
</div>
JavaScript

在导入 dyCalendarJS 文件后，我们可以通过 calendar.draw() 函数来绘制日历。

<script src="./dyCalendarJS/js/dycalendar.min.js"></script>
<script>
	//today calendar - with skin and shadow
	dycalendar.draw({
	target: '#dycalendar-today-with-skin-shadow',
	type: 'day',
	dayformat: "full",
	monthformat: "full"
	});
</script>
代码总汇
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dyCalendarJS</title>
    <link rel="stylesheet" href="./dyCalendarJS/css/dycalendar.min.css">
</head>
<body>
    
    <div class="some-class">
        <h1>Today calendar (skin-black shadow-default)</h1>
        <div class="calendar-container">
            <div id="dycalendar-today-with-skin-shadow" class="dycalendar-container skin-purple shadow-default"></div>
        </div>
    </div>

    <script src="./dyCalendarJS/js/dycalendar.min.js"></script>
    <script>
        //today calendar - with skin and shadow
        dycalendar.draw({
            target: '#dycalendar-today-with-skin-shadow',
            type: 'day',
            dayformat: "full",
            monthformat: "full"
    });
    </script>
</body>
</html>

运行该 HTML 文件后，我们将得到一个日历：

日历

样式

我们可以通过修改与日历相关的 HTML 标签的某些属性值或传递给 calendar.draw() 函数的对象的属性来改变日历的样式，我们将在后续对这些属性进行详细的讲解。

容器

我们首先对 HTML 容器部分进行讲解。请使用 dycalendar-container 为 HTML 容器设置类属性，类属性值 dycalendar-container 仅用于指定日历应用 dyCalendarJS 提供的样式的 HTML 容器，不为 HTML 容器应用该类时，你将无法使用 dyCalendarJS 提供的样式。
你可以通过为 HTML 容器添加类名来设置日历的样式（这些样式由 dyCalendarJS 提供，你也可以自由发挥为日历添加自定义样式）。

圆边

如果你需要创建一个圆边日历，请为容器添加类 round-edge。

颜色

拥有 HTML 容器 div 后，我们可以通过放置类来应用不同的皮肤。类的大致格式大致为 .skin-{name} 。

描述 类 效果
black .skin-black 样式
blue .skin-blue 样式
green .skin-green 样式
purple .skin-purple 样式
red .skin-red 样式
spacegray .skin-spacegray 样式

渐变

你可以通过为 HTML 容器添加类 .gradient 来为已经应用颜色的日历添加渐变效果。

描述 类 效果
default Just use the class .gradient 样式
black .skin-black .gradient 样式
blue .skin-blue .gradient 样式
green .skin-green .gradient 样式
purple .skin-purple .gradient 样式
red .skin-red .gradient 样式
spacegray .skin-spacegray .gradient 样式

阴影

你可以通过为 HTML 容器添加类来为日历添加阴影，类的大致格式为 .shadow-{option} 。

描述 类 效果
default .shadow-default 样式
black .shadow-black 样式
blue .shadow-blue 样式
green .shadow-green 样式
purple .shadow-purple 样式
red .shadow-red 样式
spacegray .shadow-spacegray 样式

日历

在创建日历前，我们需要为 HTML 容器提供您选择的 ID。此 ID 将用于在容器内创建日历。这里我将使用 ID 值 dycalendar-month-with-skin 用于表示容器以在该容器中创建日历。

dycalendar.draw()

dycalendar.draw() 函数能够通过传递给该函数的配置对象来创建日历。

配置选项 类型 默认值 描述
target（必须项） String 无 该参数用于指定用于创建日历的容器，请使用 CSS 选择器选中容器。类似这样：#dycalendar-month-with-skin
type String day 用于指定创建日历的类型，可选的值有 month 及 day 。
month Integer Current month 默认将显示当前月份，如果设置该选项将查找指定月份。数值 0~11 分别对应 1月~12月
year Integer Current year 默认将显示当前年份，如果设置该参数将查找指定年份。可选的年份范围为 1900-9999。
date Integer Current date 默认将显示当前日，如果设置该参数将查找指定日。可选的日数范围为 1~31。
monthformat String full 你可以通过该参数选择是显示月份的全称（full）还是其对应的简称（mmm）。例如： 如果现在是十月。如果 monthformat = “ full”，则输出为“ October”。如果 monthformat = “ mm”，则输出为“ Oct”。
dayformat String full 你可以通过该参数选择是显示星期的全称（full）还是其对应的简称（ddd）。例如： 如果今天是星期天。如果 dayformat = “ full”，则输出为“ Sunday”。如果 dayformat = “ ddd”，则输出为“ Sun”。
highlighttoday Boolean false 通过该选项你可以突出显示今天的日期。
highlighttargetdate Boolean false 如果该选项设置为 true，将突出显示指定的日期。在你未通过 month、year 等选项指定日期时，该选项的效果与 hightlighttoday 的效果无异。
prevnextbutton String high 该选项生效需要 type 参数设置为 month 。如果 prevnextbutton 选项设置为 true ，则在日历中会出现 < 及 > 按钮，通过点击这两个按钮，你可以前往当前月的上一个月或下一个月。该选项存在两种可能的值： show 及 hide 。

举个栗子

默认样式

day
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dyCalendarJS</title>
    <!-- 导入 dycalendar.css 文件 -->
    <link rel="stylesheet" href="./dyCalendarJS/css/dycalendar.min.css">
</head>
<body>
    <!-- 创建容器并使用 dyCalendarJS 提供的默认样式 -->
    <div id="calendar" class="dycalendar-container"></div>

    <!-- 导入 dycalendar.js 文件 -->
    <script src="./dyCalendarJS/js/dycalendar.min.js"></script>
    <script>
        // 绘制日历
        dycalendar.draw({
            target: '#calendar'
        })
    </script>
</body>
</html>

效果：

默认样式

month
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dyCalendarJS</title>
    <!-- 导入 dycalendar.css 文件 -->
    <link rel="stylesheet" href="./dyCalendarJS/css/dycalendar.min.css">
</head>
<body>
    <!-- 创建容器并使用 dyCalendarJS 提供的默认样式 -->
    <div id="calendar" class="dycalendar-container"></div>

    <!-- 导入 dycalendar.js 文件 -->
    <script src="./dyCalendarJS/js/dycalendar.min.js"></script>
    <script>
        // 绘制日历
        dycalendar.draw({
            target: '#calendar',
            type: 'month'
        })
    </script>
</body>
</html>

效果：

效果

其他

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dyCalendarJS</title>
    <!-- 导入 dycalendar.css 文件 -->
    <link rel="stylesheet" href="./dyCalendarJS/css/dycalendar.min.css">
</head>
<body>
    <!-- 创建容器并使用 dyCalendarJS 提供的样式 -->
    <div id="calendar" class="dycalendar-container skin-blue shadow-black"></div>

    <!-- 导入 dycalendar.js 文件 -->
    <script src="./dyCalendarJS/js/dycalendar.min.js"></script>
    <script>
        // 绘制日历
        dycalendar.draw({
            target: '#calendar',
            type: 'month',
            highlighttargetdate: true,
            prevnextbutton: 'show'
        })
    </script>
</body>
</html>

效果：
效果

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/84029.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！