热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Calendar『为挪动端而生』的自定义日历

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 – 毛遂自荐

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,用于指定特定日期的特定款式, 数组databeforeRenderArr 的数据格式一致cal.renderCallbackArr(data)
    prevent方便在回调中阻挠默许事宜cal.prevent()
    hideBackground在弹窗形式中,能够须要用到的隐蔽弹层的函数cal.hideBackground()

    Logs

    2017.5.8(add)

    • 正式宣布初版日历

    Authors

    假如你遇到了什么神bug,请提议ISSUE联络我 ~

    我是嘉宝Appian,一个卖萌落发的算法妹纸。


    推荐阅读
    author-avatar
    baobeimengmen6857124
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有