<!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资源评论
