Calendar - A Flexible Calendar for Mobile
Intro
Calendar was born for several product requirements in the mobile. It’s free, cute and customized.
The Calendar was builded by protogenic JavaScript. So you can use it with jQuery，Vue, React, and so on.
github --- https://github.com/AppianZ/calendar, 欢迎使用
中文文档在后面~
Calendar - 自我介绍
Calendar是为了满足移动端对各种场景的需求而生的，兼容性强，灵活度高。
原生插件，可以与任何框架配合使用。
特色功能
☑️ 限制时间范围，精确到【日期】
☑️ 有【直接布局】和【弹层显示】两种不同调用样式
☑️ 自由设置【月份和星期的中英文显示】、【星期天的排序位置】和【切换操作】
☑️ 利用回调控制【每一个日期】的不同样式
☑️ 可以【选中】时间点，或【时间范围】
☑️ 可以根据实际需要，【调整预判手势的灵敏度】
亲自体验一下demo：⬇️⬇️⬇️
Demo & NPM
How To Use
1. html中：
<body>
<!-- 在弹层模式中会需要一个元素触发弹层，target 可以是任意html标签。-->
<div id="target">我是一个点击区域,大家快来点我</div>
<!-- 插入日历的容器 -->
<div id="container"></div>
</body>2. js中：
// 方式一, 直接引用
<script src="calendar.js"></script>
// 方式二, 引入npm包
import Calendar from 'mob-calendar';<script>
// 实例化一个日历插件，具体参数意义可以看下文中的参数列表
new Calendar({
clickTarget: 'target',
container: 'container',
angle: 0,
isMask: true, // 是否需要弹层
beginTime: [2017, 1, 1],//如空数组默认设置成1970年1月1日开始,数组的每一位分别是年月日。
endTime: [2018, 1, 13],//如空数组默认设置成次年12月31日,数组的每一位分别是年月日。
recentTime: [2018, 1, 2],//如空数组默认设置成当月1日,数组的每一位分别是年月日。
isSundayFirst: true, // 周日是否要放在第一列
isShowNeighbor: true, // 是否展示相邻月份的月尾和月头
isToggleBtn: true, // 是否展示左右切换按钮
isChinese: true, // 是否是中文
monthType: 3, // 0:1月, 1:一月, 2:Jan, 3: April
canViewDisabled: false, // 是否可以阅读不在范围内的月份
beforeRenderArr: [{
stamp: 1512057600000,
className: 'able',
}],
success: function (item, arr, cal) {
console.log(item, arr);
cal.hideBackground();
},
switchRender: function (year, month, cal) {
console.log('计算机识别的 - 年份: ' + year + ' 月份: ' + month);
var data = [{
'stamp': 1507737600000,
'className': 'able1',
}];
cal.renderCallbackArr(data);
}
});
</script>如何正确生成实例，请看参数列表：⬇️⬇️⬇️
参数列表
| 参数名称 | 作用 | 类型 | 取值 | 是否必须 |
|---|---|---|---|---|
| clickTarget | 触发弹层的dom元素ID | {String} | - | × |
| container | 日历容器的dom元素ID | {String} | - | √ |
| angle | 调整预判手势的灵敏度 | {Number} | 建议5-20 | × |
| isMask | 布局是否使用弹层样式 | {Boolean} | true:弹层显示, false:正常布局 | √ |
| beginTime | 开始时间点 | {Array(Number)} | 数组的每一位分别是年月日，空数组默认1970年1月1日 | √ |
| endTime | 结束时间点 | {Array(Number)} | 数组的每一位分别是年月日，空数组默认次年12月31日 | √ |
| recentTime | 当前时间点 | {Array(Number)} | 数组的每一位分别是年月日，空数组默认当前月1日 | √ |
| isSundayFirst | 星期天是否要放在第一列 | {Boolean} | true:星期日在第一列, false:星期日在最后一列 | √ |
| isShowNeighbor | 是否展示相邻月份的月尾和月头 | {Boolean} | true:显示相邻月份的月尾和月头, false:不显示 | √ |
| isToggleBtn | 是否展示左右切换按钮 | {Boolean} | true:显示左右切换按钮， false:不显示 | √ |
| isChinese | 是否展示中文星期 | {Boolean} | true:显示中文星期简写，false:显示英文星期简写 | √ |
| monthType | 月份的展示字符 | {Number 0-3} | 0:1月, 1:一月, 2:Jan, 3: January | √ |
| canViewDisabled | 是否可以阅读不在范围内的月份 | {Boolean} | true:无限滑动，false:只查看时间范围内的月份 | √ |
| beforeRenderArr | 初次渲染时给特殊日期指定样式 | {无序Array(Object)} | 数组元素有两个参数 指定时间戳stamp{Number} 和 指定样式名字className {String}，详见下文 |
√ |
| success | 点击某个日期的回调 | {Fuction(item, array,cal)} | 返回3个自带参数，item表示当前点击的时间戳，array表示连续两次点击的两个时间戳,cal 指向实例 |
√ |
| switchRender | 日历切换后的回调 | {Fuction(year, month, cal)} | 返回3个自带参数，year表示新生成的年份，month表示新生成的月份(从0开始), cal 指向实例 |
√ |
js中：
// 渲染时给特殊日期指定样式的数据格式
beforeRenderArr: [{
stamp: 1512057600000, // 指定某个时间戳
className: 'disable', //指定该时间戳渲染的样式
}]html中：
// 渲染后的效果如下
// li 是一个矩形，i 是圆形
<li class="container-item-1512057600000 disable" data-stamp="1512057600000">
<i data-stamp="1512057600000">2</i>
</li>| 原型链暴露的函数 | 作用 | 示例 |
|---|---|---|
| renderCallbackArr | 渲染传入的数组data，用于指定特定日期的特定样式, 数组data和 beforeRenderArr 的数据格式一致 |
cal.renderCallbackArr(data) |
| prevent | 方便在回调中阻止默认事件 | cal.prevent() |
| hideBackground | 在弹窗模式中，可能需要用到的隐藏弹层的函数 | cal.hideBackground() |
Logs
2017.5.8(add)
正式发布第一版日历
Authors
如果你遇到了什么神bug，请发起ISSUE联系我 ~
我是嘉宝Appian，一个卖萌出家的算法妹纸。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。