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

Gu_Yan 发布于2019-08-20 16:52 / 3210人阅读

摘要：，欢迎使用中文文档在后面自我介绍是为了满足移动端对各种场景的需求而生的，兼容性强，灵活度高。如空数组默认设置成当月日数组的每一位分别是年月日。

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，一个卖萌出家的算法妹纸。

混合云专线服务 Calendar java calendar vue-calendar

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83217.html

Joda Time API介绍（1）基本介绍

摘要：比的更好用，并且完美兼容的时间点此访问用户向导地址当前最新版本地址基本对象日期时间输出结果本地日期时间输出结果本地日期输出结果本地时间输出结果与相互转换输出结果与相互转换 Joda Time : 比JDK的Date,Calendar更好用，并且完美兼容的时间API. 点此访问Joda Time User Guide 用户向导地址 joda-time joda-time ...

BakerJ 2019-08-14 12:29 评论0 收藏0
JAVA操作数据库Datetime数据

摘要：如何将类型插入数据库中，成为好多人的一个不小的障碍。当然，并不一定要在外部插入时间，因为在数据库中，可以让它自动插入，比如里面，用来插入当前时间，而在时，便可以不用管它了。但有的时候还是避免不了，要手工插入时间，以更新数据库。在JDK 1.1后，java.util.Date 类型的大多数方法已经不推荐使用了。代替它的是Calendar。而在java.sql.Date 和 java...

jonh_felix 2019-08-14 11:54 评论0 收藏0
HashMap 分拣存储实现一对多映射

摘要：实际需求中如何运用实现过滤重复这里的重复不一定是某个字段一样的，而且时间点不重叠这里需要校验不重叠的字段有员工所在部门，出发点，目的点，生效日期，失效日期，出发时点，到达时点，出发分钟，到达分钟是需要校验的对象。在我们的印象中，Map k，v 映射，一对一的比较多，下面主要讲一对多的关系映射，主要需求在于，需要把很多的，杂乱的数据按照不同的类型进行分类处理，A,B,C类型的数据进行...

venmos 2019-08-14 14:08 评论0 收藏0
执行定时器报空指针异常

我遇到的问题是启动定时器，然后在跟数据库交互的地方报错，Exception in thread Timer-1 java.lang.NullPointerException。后来检查了一下是因为，dataAcquisitionVoMapper没有正常注入，原始代码如下： package com.hqgd.pms.controller.Timer; import java.text.SimpleD...

zhichangterry 2019-08-16 17:57 评论0 收藏0