已经好久没有更新技术博客了，因为最近一直在做跨平台web app应用的开发，由于是刚做这个，也没太多经验同大家分享，可我是一个闲不住的人，我还是决定于百忙之中抽空整理一篇，记录下开发历程......——前言

可以选择日期，按月份分别查看应出勤数、已出勤数、迟到数、早退数，用特殊标记标出某天是迟到还是早退等等，选中某天，直接加载该天的所有考勤记录，看上去挺简单的功能，要我写js估计可以写到吐血，还好懂得拿来主义，网上找个开源的日历组件，然后进行改造。日历组件源码地址Calendar.js由于公司没有平面和美工，也没有前端，所以这些活我就兼做了，所以大家不要对界面吐槽，我已经尽力了，555~，下面的界面截图我都是用的谷歌浏览器，模拟iphone6的效果，同真机上比自然会有一定的出入，通常来说真机上面要比模拟器上面更漂亮和清晰，界面效果如下：

注：橙色表示当前日期，浅蓝色表示选中日期，默认情况下显示当前日期，并加载当天的考勤记录。

之前本来打算使用区域滚动的，后面看见原型界面是整个页面滚动，所以我就暂时注释了这块。

日历支持左右滑动进行翻页（按月进行翻），顶部按钮也支持翻页。

技术选型：mui、h5、h5+、vue.js

html代码如下：

我的考勤我的考勤天应出勤天实际出勤次迟到次早退星期一<div> <div>早班上班打卡时间您今天未打卡哦~</div> </div>; mui.init(); mui.ready(function () { //g.initScroll({ h: '300px' });//区域滚动 }); Vue({ el: , data: { obj: { attendance: '', actualAttendance: '', beLate: '', leaveEarly: '' }, appData: { attendance: [], actualAttendance: [], beLate: [], leaveEarly: [] }, list: [] }, mounted: function () { ; eventListener(); initHandleData(_self); Calendar({ parentNode: document.getElementById(), appData: _self.appData, sltDateFuc:_self.sltDateFuc }); () { plus.webview.currentWebview(); _self.userName = wv.userName; _self.roleName = wv.roleName; _self.imgUrl = wv.imgUrl; }) }, methods: { (date) { //test console.log(date); g.convertDateFromString(date); ) { [{ name: , address: , time: , tag: 1, errorType: }, { name: , address: , time: , tag: 1, errorType: }, { name: , address: , time: , tag: 1, errorType: '' } ]; } ) { [{ name: , address: , time: , tag: 1, errorType: }, { name: , address: , time: , tag: 1, errorType: }, { name: , address: , time: , tag: 1, errorType: '' } ]; } else { []; } }, (t) { []; switch (t) { ]; app.appData.beLate = []; app.appData.leaveEarly = []; app.appData.actualAttendance = []; break; ]; app.appData.attendance = []; app.appData.leaveEarly = []; app.appData.beLate = []; break; ]; app.appData.actualAttendance = []; app.appData.attendance = []; app.appData.leaveEarly = []; break; ]; app.appData.attendance = []; app.appData.actualAttendance = []; app.appData.beLate = []; break; } app.list = result; canlendar = new Calendar({ parentNode: document.getElementById(), appData: app.appData, sltDateFuc: app.sltDateFuc }); } } }); function eventListener() { () { console.log() canlendar.turnPre(); ).innerHTML); updateMonth(str); }) () { canlendar.turnNext(); ).innerHTML); updateMonth(str); }) } function updateMonth(str) { ); ); ; g.id( str; g.id( r; } function initHandleData(app) { app.obj.attendance = 27; app.obj.actualAttendance = 26; app.obj.beLate = 2; app.obj.leaveEarly = 3; }

数据我都是模拟的假数据，所以看见显示有问题不要奇怪，实际项目自然是用ajax调用api接口进行数据填充。咋一看就知道这里面用到了日期和垂直时间线。

calendar.js我是在别人的calendar组件基础之上进行修改的，代码如下：