最近因为需要在做会议室预约系统,其中需要用到一个显示当天预约情况的时间轴,去网上找了一下,发现只有和微博类似的历史时间轴,于是便自己动手做了一个当日时间轴控件(daily-timeline.js),实际使用效果如下:
原理是Canvas的绘制,难点不多都是基本操作,但要考虑坐标的关系,以及文本的相对居中这些细节的东西。
使用方法:
1、创建canvas标签,id和daily-timeline.js中保持一致即可,宽高亦可修改,同时记得引入js
<canvas id="dailyTimeline" width="800px" height="1440px" style=""></canvas>
<script type="text/javascript" src="js/daily-timeline.js"></script>
2、绘制日程格子
createSchedule(startTime, endTime, contentText);
参数:
startTime,开始时间(格式”xx:xx”)
endTime,结束时间(格式”xx:xx”)
contentText,文本内容(可选)
例如:
createSchedule("08:20", "09:10", "吃饭");
createSchedule("09:45", "10:10", "睡觉");
createSchedule("11:20", "13:00", "打豆豆");
效果:
3、空数据时显示友好提示
drawEmptyView("今天还没有数据哦 ^_^");
说明:在实际运用中往往通过解析json来判断是否数据为空。
效果:
4、重绘时间轴
redrawCanvas();
调用该方法后,重绘时间轴,清除时间轴里的所有日程格子。
项目源码:https://github.com/Yiiip/daily-timeline.js
(注:转载请遵循CC-BY-NC-ND协议。)