html和css实现时间表,Timesheet.js

时间表 Timesheet.js

分享到：

更多

这个Javascript程序使用神奇的HTML5和CSS3技术，将时间数据和事件进行可视化显示。使用纯JavaScript绘制时间表(轴)，使用CSS3进行漂亮的美好，同时兼容移动手机设备 …

2002

2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

2002-09/2002 一个惊险刺激的时刻

06/2002-09/2003 一些美好的记忆

2003 非常倒霉的事情

10/2003-2006 至少还有点意思

02/2005-05/2006 非常享受的时光

07/2005-09/2005 又开始倒霉了

10/2005-2008 这段时间什么都没有发生

01/2008-05/2009 权利的游戏第4季

01/2009-05/2009 权利的游戏第5季

02/2010-05/2010 权利的游戏第6季

09/2008-06/2010 行尸走肉第3季

在页面是只需要引入 Timesheet.js 然后配置你的数据。没有其它的程序哭依赖，不需要jQuery，更不需要Angular.JS！几行简单的JavaScript代码就能实现漂亮的HTML5布局，使用CSS3技术自定义出你想要的任何显示效果。

下面就是一个简单的一些事件时间表的数据样例：

new Timesheet('timesheet-default', 2002, 2013, [

['2002', '09/2002', 'A freaking awesome time', 'lorem'],

['06/2002', '09/2003', 'Some great memories', 'ipsum'],

['2003', 'Had very bad luck'],

['10/2003', '2006', 'At least had fun', 'dolor'],

['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],

['07/2005', '09/2005', 'Bad luck again', 'default'],

['10/2005', '2008', 'For a long time nothing happened', 'dolor'],

['01/2008', '05/2009', 'LOST Season #4', 'lorem'],

['01/2009', '05/2009', 'LOST Season #4', 'lorem'],

['02/2010', '05/2010', 'LOST Season #5', 'lorem'],

['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']

]);

时间表Timesheet.js的用法是否简单。希望你用的舒心愉快，感谢你的阅读了解，如果你有兴趣，可以尝试着个Timesheet.js定义各种不同的显示样式 …