简介

calendar.js是一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！

插件特定：

原生 JavaScript 代码，无任何第三方库的依赖；
支持单选、多选、范围和星期选择 4 种选择方式；
支持年代、月份、日期 3 中不同视图的切换；
高亮显示周末日期；
弹性布局，适应各种不同尺寸大小；
简洁大方的 UI 界面，清爽耐看；
配置灵活方便，简单易用；
代码遵循 UML 规范；

使用

1.  引入文件

<link rel="stylesheet" href="static/css/calendar.css">
<script src="static/js/popper.min.js"></script>

2.  简单使用

日期视图模式

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)
  }
})

月份视图模式

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)
  }
})

年代视图模式

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)
  }
})

相关链接

Gitee 地址 ：https://gitee.com/yaohaixiao/calendar.js?utm_source=alading&utm_campaign=repo#https://gitee.com/link?target=https%3A%2F%2Fyaohaixiao.github.io%2Fcalendar.js%2F

在线演示：https://yaohaixiao.github.io/calendar.js/