移动端H5日历组件，已废弃不在维护

Moxmi 发布于2019-08-22 16:09 / 3389人阅读

摘要：默认可选回调函数，绑定业务数据。例如某天有日程，则会在对应日期上标识出一个小红点或者其他标识，默认传入数据格式必选回调函数，当你点击或轻触某日期后执行。

文档维护者：孙尊路

喜欢的话，记得star 一下噢！

适用场景

该组件目前仅适用于移动端H5页面展示，后期高级用法中会讲述到如何基于日历基类实现自定义模板传入。（即：开发者只需要传入自己的模板即可实现出自己的优美的日历出来。） 本篇主要是带大家入门日历组件的使用，该文档后面会持续优化更新。若有不足，请大家多多指教，小编会及时更正！

实例展示

日历示例演示，支持滑动屏幕左右切换等效果 注：按F12可在浏览器预览

示例demo源代码(H5)：点击此处进行下载

典型项目应用案例

【移动OA类】我的日程

【招投标类】开标日程

依赖资源

libs/calendar_base.js 日历组件基类js库

libs/calendar_base.css 日历组件基类css库，可以根据业务需求，任意个性化，从而达到设计视觉效果

配置和使用方法

DOM结构

一个div即可

初始化

以下代码是最简单的用法，更多复杂用法请参考calendar_showcase源码下载

var calendar = new Calendar({
    // 日历容器
    container: "#calendar",
    // 点击日期事件
    onItemClick: function(item) {
        var defaultDate = item.date;
    }
});

参数说明

参数	参数类型	说明
container	string或HTMLElement	必选 Calendar容器的css选择器，例如“#calendar”。默认为#calendar
pre	string或HTMLElement	可选前一个月按钮的css选择器或HTML元素。默认.pre
next	string或HTMLElement	可选后一个月按钮的css选择器或HTML元素。默认.next
backToToday	string或HTMLElement	可选返回今天按钮的css选择器或HTML元素。默认.backToToday
dataRequest	Function	可选回调函数，绑定业务数据。例如：某天有日程，则会在对应日期上标识出一个小红点或者其他标识，默认传入数据格式：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClick	Function	必选回调函数，当你点击或轻触某日期 300ms后执行。回调日期结果：2018-04-07
swipeCallback	Function	可选回调函数，滑块释放时如果触发slider向后(左、上)切换则执行
template	Function或String	可选，元素渲染的模板，可以是一个模板字符串，也可以是一个函数，为函数时，确保返回模板字符串，默认组件内置模板
isDebug	Boolean	可选是否开启调试模式，默认false

API

生成的calendar对象可以调用如下API

var calendar = new Calendar(...);

refresh()

会销毁清空日历容器中的数据重新进行渲染。默认传入参数为空，刷新当前月份的日历数据。

calendar.refresh();

同时也可以手动传入某个日期渲染日历数据，例如：渲染出2020-08-08的日历如下：

calendar.refresh({
    year: "2020",
    month: "08",
    day: "08"
});

参数说明

参数	参数类型	说明
{}	object	必选日期对象必须传入以下格式：{year:"2018",month:"04",day:"08"}

slidePrev()

切换为上一个月，与组件内部传入参数pre作用一样，该API支持Promise异步成功回调里处理自己的业务逻辑。

calendar.slidePrev().then(...).then(...);

slideNext()

切换为下一个月，与组件内部传入参数next作用一样，该API支持Promise异步成功回调里处理自己的业务逻辑。

calendar.slideNext().then(...).then(...);

addActiveStyleFordate()

给特定日期新增选中激活样式,比如：把日期2018-08-21标记位已选中状态。

calendar.addActiveStyleFordate("2018-08-21");

参数说明

参数	参数类型	说明
"2018-08-21"	String	必选日期格式必须符合以下格式：2018-08-21

refreshData()

会获取整个月的日历数据（6 * 7 = 42方格的日期），可根据该API自行个性化开发自己的日历组件，例如：

calendar.refreshData({
    year: "2018",
    month: "04",
    day: "08"
},
function(output, data) {
    console.log("==某个月的日历渲染数据：==" + JSON.stringify(data));
    console.log("==组件自带模板==" + output);
});

输出日历数据格式：

[{"day":25,"lunar":"初九","date":"2018-03-25","isforbid":"0"}]

输出内置组件模板格式：

25初九

优点和好处

能够极大方便实际项目上开发人员的上手使用，而且版本是不断根据实际项目上的需求进行优化升级的，开放源码可以让特殊需求的项目开发人员进行修改、补充和完善。

存在的不足之处

目前依赖js库有多个（mustache.min.js、mui.min.js）主要是一些常用的移动端js库（无可厚非），包含组件的核心库，或许有人认为影响加载速度之类的，其实已经有很多项目在应用效果还可以，当然了小编也正在努力剥离第三方js库,思路已经有了，只不过需要一点时间进行代码重构，若在此之前给你带来的不便，还请多多包涵，毕竟优化组件确实需要花费大量时间的。

idc机房托管服务器托管移动端webrtc h5 H5移动端上传图片日历组件前端组件维护

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

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

移动端H5周历组件

摘要：默认可选回调函数，绑定业务数据。切换为下一周，与组件内部传入参数作用一样，该支持异步成功回调里处理自己的业务逻辑。文档维护者：孙尊路喜欢的话，记得star 一下噢！适用场景前些阵子，写了一篇《日历组件实现》的使用在线文档，遇到一个需求：实现一个H5周历来填写每周的工作日志，去网上查阅资料，发现很多示例也没有一个标准的使用文档，感觉用起来也吃力，于是乎，自己造了一个周历组件，文...

incredible 2019-08-22 16:35 评论0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵，如果喜欢，点个开源不易。作者将原素材文章进行了新内容的添加和重新排列，但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧，来提升你的和代码。收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

ermaoL 2019-08-29 13:03 评论0 收藏0
关于weex

摘要：在最上面的，阿里一般称之为文件，通过转换成，再部署到服务器，这样服务端就完成了。例如，通过安装了业界的工具库用上和如今前端的开发，一般离不开预处理器，比如和。在默认的文件中，即使有的助力，这类预处理器也是对其无能为力的。生命周期 module.exports = { data: {}, methods: {}, init: function () { ...

chadLi 2019-08-20 12:27 评论0 收藏0
H5 input[type='date'] 优化 pc端和移动端的使用

标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性，遇到的一些问题，以及功能扩展：获取当前日期，并显示在input[type=date]上 html: js: $(function(...

VincentFF 2019-08-30 11:12 评论0 收藏0