时间表 Timesheet.js

这个Javascript程序使用神奇的HTML5CSS3技术,将时间数据和事件进行可视化显示。使用纯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技术自定义出你想要的任何显示效果。

<script src="/javascripts/timesheet.js" type="text/javascript" />

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

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定义各种不同的显示样式 …

Fork Timesheet.js on GitHub