热门标签 | 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,一个卖萌落发的算法妹纸。


    推荐阅读
    • Java太阳系小游戏分析和源码详解
      本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践,作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构,包括工具类、常量、图片加载、面板等。通过这个小游戏的制作,读者可以巩固和应用所学的知识,如类的继承、方法的重载与重写、多态和封装等。 ... [详细]
    • Java实战之电影在线观看系统的实现
      本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
    • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
    • 本文介绍了一个Java猜拳小游戏的代码,通过使用Scanner类获取用户输入的拳的数字,并随机生成计算机的拳,然后判断胜负。该游戏可以选择剪刀、石头、布三种拳,通过比较两者的拳来决定胜负。 ... [详细]
    • 开发笔记:加密&json&StringIO模块&BytesIO模块
      篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
    • Java容器中的compareto方法排序原理解析
      本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
    • 树莓派Linux基础(一):查看文件系统的命令行操作
      本文介绍了在树莓派上通过SSH服务使用命令行查看文件系统的操作,包括cd命令用于变更目录、pwd命令用于显示当前目录位置、ls命令用于显示文件和目录列表。详细讲解了这些命令的使用方法和注意事项。 ... [详细]
    • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
    • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
    • 本文介绍了如何在给定的有序字符序列中插入新字符,并保持序列的有序性。通过示例代码演示了插入过程,以及插入后的字符序列。 ... [详细]
    • baresip android编译、运行教程1语音通话
      本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
    • javascript  – 概述在Firefox上无法正常工作
      我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
    • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
      介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
    • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
    • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
      本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
    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社区 版权所有