daily-timeline.js——打造每日时间轴

来源：互联网发布：mac搭建lamp 编辑：程序博客网时间：2024/06/14 16:23

最近因为需要在做会议室预约系统，其中需要用到一个显示当天预约情况的时间轴，去网上找了一下，发现只有和微博类似的历史时间轴，于是便自己动手做了一个当日时间轴控件（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协议。)

2 0