<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<title>Calendar | 一个简单实用的 JavaScript 日历控件！</title>
<meta name="description" content="一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！">
<meta name="twitter:description" content="JavaScript,Calendar,calendar.js">
<link href="css/calendar.css" rel="stylesheet" type="text/css">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
font-size: 13px;
background-color: #fff;
}
a:link,
a:visited,
a:hover {
color: #34a6f8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.title {
margin: 0 2em;
text-align: center;
height: 80px;
line-height: 80px;
font-family: Georgia, Arial, sans-serif;
overflow: hidden;
}
.version {
font-size: 14px;
}
.calendar {
position: relative;
z-index: 1;
margin: 0 2em 2em;
padding: 2em;
box-sizing: border-box;
box-shadow: 0 0 15px #ddd;
font-family: 'Microsoft YaHei UI', Arial, sans-serif;
overflow: hidden;
}
.feature {
margin: 0 auto;
padding: 0 15px;
font-weight: 500;
overflow: hidden;
}
.demo {
position: relative;
z-index: 1;
margin: 1.5em auto;
height: 360px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.demo-example,
.demo-usage {
position: relative;
z-index: 1;
float: left;
width: 50%;
padding: 15px;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.demo-example:after {
position: absolute;
z-index: 2;
top: 0;
right: 0;
height: 100%;
width: 1px;
background-color: #ddd;
overflow: hidden;
content: ' ';
}
.demo-pre {
height: 100%;
padding: 15px;
background-color: #f8f8f8;
box-sizing: border-box;
overflow: auto;
}
.demo-pre:hover {
background-color: #f1f1f1;
}
.demo-code {
line-height: 150%;
font-size: 14px;
font-family: 'Courier New', Consolas, 'Microsoft YaHei UI', Arial, sans-serif;
}
.copyright {
margin: 0 auto;
line-height: 150%;
text-align: center;
font-size: 14px;
padding: 0 0 1.5em;
overflow: hidden;
}
/*美化chrome滚动条*/
::-webkit-scrollbar {
width: 7px;
height: 7px;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-track-piece {
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(0, 0, 0, .10);
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: rgba(0, 0, 0, .10);
-webkit-border-radius: 5px;
}
::-webkit-scrollbar:hover {}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .15);
}
</style>
</head>
<body>
<h1 class="title"><a href="https://github.com/yaohaixiao/calendar.js">Calendar.js</a><sup class="version"><a href="https://github.com/yaohaixiao/calendar.js/releases">v0.4.1</a></sup></h1>
<div class="calendar">
<h2 class="feature">日期试图模式</h2>
<div class="demo">
<div class="demo-example" id="dates-view"></div>
<dov class="demo-usage">
<pre class="demo-pre"><code class="demo-code">new Calendar({
// 设置显示位置
parent: 'dates-view',
// 初始化显示时间
time: '2019-6-11',
// viewMode：
// 0 - 日期模式（默认值）
viewMode: 0,
// 配置日期选择的事件处理器 onDatePick，参数如下：
// time - 选中的日期时间
// $el - 点击的 DOM 节点
// calendar - 日历控件的实例
onDatePick: function (time, $el, calendar) {
console.log('选择时间：', time)
console.log('选择DOM：', $el)
console.log('日历实例：', calendar)
}
})</code></pre>
</dov>
</div>
<h2 class="feature">月份试图模式</h2>
<div class="demo">
<div class="demo-example" id="months-view"></div>
<dov class="demo-usage">
<pre class="demo-pre"><code class="demo-code">new Calendar({
parent: 'months-view',
// 设置月份
time: '2019-7',
// viewMode：
// 1 - 月份模式
viewMode: 1,
// 配置月份选择的事件处理器 onMonthPick，参数如下：
// time - 选中的日期时间
// $el - 点击的 DOM 节点
// calendar - 日历控件的实例
onMonthPick: function (time, $el, calendar) {
console.log('选择时间：', time)
console.log('选择DOM：', $el)
console.log('日历实例：', calendar)
}
})</code></pre>
</dov>
</div>
<h2 class="feature">年代试图模式</h2>
<div class="demo">
<div class="demo-example" id="years-view"></div>
<dov class="demo-usage">
<pre class="demo-pre"><code class="demo-code">new Calendar({
parent: 'years-view',
// 设置年份
time: '2021',
// viewMode：
// 1 - 年代模式
viewMode: 2,
// 配置月份选择的事件处理器 onYearPick，参数如下：
// time - 选中的日期时间
// $el - 点击的 DOM 节点
// calendar - 日历控件的实例
onYearPick: function (time, $el, calendar) {
console.log('选择时间：', time)
console.log('选择DOM：', $el)
console.log('日历实例：', calendar)
}
})</code></pre>
</dov>
</div>
<h2 class="feature">单选模式</h2>
<div class="demo">
<div class="demo-example" id="single-pick"></div>
<dov class="demo-usage">
<pre class="demo-pre"><code class="demo-code">new Calendar({
// 设置显示位置
parent: 'single-pick',
// 初始化显示时间（默认选中时间）
time: '2019-6-18',
// viewMode：
// 0 - 日期模式（默认值）
viewMode: 0,
// pickMode：
// single - 单选模式
pickMode: 'single',
// 配置日期选择的事件处理器 onDatePick，参数如下：
// time - 选中的日期时间
// $el - 点击的 DOM 节点
// calendar - 日历控件的实例
onDatePick: function (time, $el, calendar) {
console.log('选择时间：', time)
console.log('选择的 DOM 节点：', $el)
console.log('日历实例：', calendar)
},
// 配置今天选择的事件处理器 onTodayPick，参数如下：
// 1. 先切换到日期试图模式；
// 2. 触发日期选择的业务逻辑；
onTodayPick: function (time, $el, calendar) {
console.log('选择时间：', time)
console.log('选择的 DOM 节点：', $el)
console.log('日历实例：', calendar)
}
})</code></pre>
</dov>
</div>
<h2 class="feature">多选模式</h2>
<div class="demo">
<div class="demo-example" id="multiple-pick"></div>
<dov class="demo-usage">
<pre class="demo-pre"><code class="demo-code">new Calendar({
// 设置显示位置
parent: 'multiple-pick',
// 初始化显示时间（默认选中时间）
time: '2019-6-19',
// viewMode：
// 0 - 日期模式（默认值）
viewMode: 0,
// pickMode：
// multiple - 多选模式
pickMode: 'multiple',
// 配置日期选择的事件处理器 onDatePick，参数如下：
// time - 选中的多个日期（已排序）时间
// $el - 点击的 DOM 节点
// calendar - 日历控件的实例
onDatePick: function (time, $el, calendar) {
console.log('选择时间：' + time)
console.log('选择的 DOM 节点：' + $el)
console.log('日历实例：' + calendar)
},
// 配置今天选择的事件处理器 onTodayPick，参数如下：
// 1. 先切换到日期试图模式；
// 2. 触发日期选择的业务逻辑；
onTodayPick: fun
calendar.js-master.zip （50个子文件） 
calendar.js-master 
.eslintrc 741B gulpfile.js 7KB src styles colors.scss 499B calendar.scss 4KB icons style.css 872B fonts icomoon.woff 1KB
icomoon.svg 1KB icomoon.eot 1KB icomoon.ttf 1KB pug index.pug 24KB scripts calendar.js 80KB es6 dom.js 4KB utils.js 4KB delegate.js 4KB calendar.js 60KB time.js 9KB LICENSE 1KB .babelrc 54B docs js calendar.js 89KB calendar.min.js.map 118KB calendar.min.js 24KB css calendar.css 5KB fonts icomoon.woff 1KB icomoon.svg 1KB icomoon.eot 1KB icomoon.ttf 1KB
index.html 19KB dist calendar.min.css.map 5KB calendar.min.css 4KB css calendar.css 3KB calendar.js 89KB calendar.css 5KB es6 dom.js 4KB utils.js 4KB delegate.js 4KB calendar.js 60KB time.js 9KB calendar.min.js.map 118KB calendar.min.js 24KB fonts icomoon.woff 1KB icomoon.svg 1KB icomoon.eot 1KB icomoon.ttf 1KB umd dom.js 5KB utils.js 6KB delegate.js 6KB calendar.js 73KB time.js 11KB package.json 2KB .gitignore 38B资源评论
Java程序员-张凯
- 粉丝: 1w+
- 资源: 7451
最新资源
- 用Excel表体验梯度下降法,附带标识版本
- 新思路下的求数独VBA表格
- day13练习.zip
- 项目7 新安全威胁防范策略.pptx
- .VOB文件专业播放软件 包含各种格式
- Dart语言基础及其在Flutter开发中的应用
- BetterDisplay for mac(mac专用的显示器分辨率调整工具)
- 自然环境下的人脸检测与表情识别_任鹏.caj
- 内存搜索工具(易).rar
- wanHarmony项目
- War3CacheConverter
- 基于贪心算法的Python实现及其在LeetCode问题中的应用
- 网络综合项目实验12.19
- 标量（scalar）、向量(vector)、矩阵(matrix)、数组(array)等概念的深入理解与运用
- 数值计算复习内容，涵盖多种方法，内容为gpt生成
- 标量（scalar）、向量(vector)、矩阵(matrix)、数组(array)等概念的深入理解与运用
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
