建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS日历插件calendar.js

来源:易助科技网浏览量:14收藏

简介


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


JS日历插件calendar.js-示例图1


JS日历插件calendar.js-示例图2


插件特定:

原生 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/