作者:baobeimengmen6857124 | 来源:互联网 | 2023-06-26 10:12
Calendar–AFlexibleCalendarforMobileIntroCalendarwasbornforseveralproductrequirementsinthem
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
Calendar Demo
Calendar NPM
How To Use
1. html中:
我是一个点击地区,人人快来点我
2. js中:
// 体式格局一, 直接援用
// 体式格局二, 引入npm包
import Calendar from 'mob-calendar';
怎样准确天生实例,请看参数列表:⬇️⬇️⬇️
参数列表
参数称号 | 作用 | 范例 | 取值 | 是不是必需 |
---|
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 是圆形
2
原型链暴露的函数 | 作用 | 示例 |
---|
renderCallbackArr | 衬着传入的数组data,用于指定特定日期的特定款式, 数组data和 beforeRenderArr 的数据格式一致 | cal.renderCallbackArr(data) |
prevent | 方便在回调中阻挠默许事宜 | cal.prevent() |
hideBackground | 在弹窗形式中,能够须要用到的隐蔽弹层的函数 | cal.hideBackground() |
Logs
2017.5.8(add)
Authors
假如你遇到了什么神bug,请提议ISSUE联络我 ~
我是嘉宝Appian,一个卖萌落发的算法妹纸。