移动端H5周历组件

incredible 发布于2019-08-22 16:35 / 2447人阅读

摘要：默认可选回调函数，绑定业务数据。切换为下一周，与组件内部传入参数作用一样，该支持异步成功回调里处理自己的业务逻辑。

文档维护者：孙尊路

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

适用场景

前些阵子，写了一篇《日历组件实现》的使用在线文档，遇到一个需求：实现一个H5周历来填写每周的工作日志，去网上查阅资料，发现很多示例也没有一个标准的使用文档，感觉用起来也吃力，于是乎，自己造了一个周历组件，文章下面有很详细的使用说明。 本篇结合了实际的项目应用需求整理出来的，该文档后面会持续优化更新。若有不足，也请大家多多指教，小编会及时更正！

实例展示

周历示例演示，支持上一周、下一周切换等效果 注：按F12可在浏览器预览

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

典型项目应用案例

【移动OA类】我的日志

依赖资源

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

配置和使用方法

DOM结构

一个div即可

初始化

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

var weekcalendar = new CalendarWeek({
    // 默认周历组件容器
    "container": "#weekcalendar",
    // 点击日期事件
    "onItemClick": function(item) {
        console.log(item.date + " " + item.week);
    },
    isDebug: false
});

参数说明

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

API

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

var weekcalendar = new CalendarWeek(...);

refresh()

外部刷新方法，重洗渲染当前周的列表数据。

weekcalendar.refresh();

slidePrev()

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

weekcalendar.slidePrev().then(...).then(...);

slideNext()

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

weekcalendar.slideNext().then(...).then(...);

优点和好处

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

存在的不足之处

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

云服务器 GPU云服务器移动端webrtc h5 H5移动端上传图片服务端组件手机端webrtc h5

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

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

前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0
实践出真知：零基础小白学编程做游戏的 14 周历程

摘要：谢耳朵爱玩的游戏，石头剪子布的升级版。拥有最高点数的玩家获胜，其点数必须等于或低于点。在编写这个游戏的过程中第一次引入了类概念。宇宙空间中微小的摩擦力和陨石撞击后受到的力，都要考虑并且编入游戏中。人人都应该学编程吗？随着每个人的工作与电脑连结愈发紧密，也许这是真的。我是游戏设计师，在分工细致的国内网游业界，不需要研发或美术背景也能担当游戏设计重任的角色多了起来。有时候他们甚至只需...

haitiancoder 2019-07-24 17:42 评论0 收藏0
FineReport中如何安装移动端H5插件

摘要：移动端报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数。另外移动端的插件，图表是只支持显示新图表。 HTML5报表插件安装及使用编辑插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索，这里就不做详细介绍了。移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...

bovenson 2019-08-20 15:52 评论0 收藏0