1.1.1 • Published 5 years ago
web-calendar-js v1.1.1
web-calendar-js
一个js日历插件（A js calendar plugin ）
注意事项
- 兼容
IE8+(不包括IE8) - 本日历插件年份范围在
1900年——2100年
安装
1. 第一种方式，直接引入
- 引入
js
<script src="https://webxiaoma.github.io/web-calendar-js/lib/js/calendar.min.js"></script>- 引入
css
<link rel="stylesheet" href="https://webxiaoma.github.io/web-calendar-js/lib/static/css/calendar.min.css">推荐下载到本地使用，在 web-calendar-js 中 的
lib目录中引入相应的js以及css
2. 第二种方式
使用安装npm下载
npm install --save-dev web-calendar-js
或
npm i -D web-calendar-js基本用法
var cal = new Calendar(el,options)el:input元素的id或class,推荐使用id；options: 日历插件的配置，各项配置见下表；
Options 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| format | 年月日之间的分隔符 | String | —— | - |
| isFillZero | 单月份和单日前是否补0 | Boolean | —— | true |
| max | 可选择的最大时间 | String/Number | 时间格式如(2019-2-1、2019/2/1、时间戳) | true |
| min | 可选择的最小时间 | String/Number | 时间格式如(2019-2-1、2019/2/1、时间戳) | true |
| nextMonthBtnText | 上一年按钮文本 | String | —— | << |
| nextYearBtnName | 下一年按钮文本 | String | —— | >> |
| prevMonthBtnName | 上一月按钮文本 | String | —— | < |
| nextMonthBtnName | 下一月按钮文本 | String | —— | > |
| isHoliday | 是否在周六周日时显示休息字眼 | Boolean | —— | true |
| isLunar | 是否显示阴历 | Boolean | —— | true |
| isFestival | 是否显示节日（当显示阴历时，才会起作用） | Boolean | —— | true |
| isSolarTerm | 是否显示节气（当显示阴历时，才会起作用） | Boolean | —— | true |
Options 事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| click | 选择日期时触发 | 返回日期对象day，日期对象中含有日期信息dayMsg |
| change | 日期更改时触发 | 返回包含年月日等信息的对象 |
| rightHandClick | 右击日期时触发 | 返回日期对象day |
Options 方法
| 方法 | 说明 | 参数 |
|---|---|---|
| beforeCreateDay | 日期天数创建前钩子函数 | 返回日期对象day |
| afterCreateDay | 日期天数创建后钩子函数 | 返回日期对象day |
其它对象说明
dayMsg对象
Animal: 当年的生肖属性IDayCn: "二十"IMonthCn: "十月"LFtv: 阴历常见节日（默认null）SFtv: 阳历历常见节日（默认null）Term: 二十四节气astro: 当日星座cDay: 阳历日cMonth: 阳历月份（1-12）cYear: 阳历年份gzDay: 干支纪天gzMonth: 干支纪月gzYear: 干支纪年isLeap: 是否是闰年，boolean值isTerm: 当时是否是二十四节气，boolean值isToday: 当前阳历日期是否就是今日，boolean值lDay: 阴历号lMonth: 阴历月份lYear: 阴历年份nWeek: 数字星期（1-7）ncWeek: 字符串星期