[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
Post on:2014年9月8日
sponsors
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。
jQueryやAngular.JSなど他のスクリプトは不要です。
Timesheet.js
Timesheet.js -GitHub
Timesheet.jsのデモ
デモは見た目のかっこよさだけでなく、ホバーでちょっとしたエフェクトも備えられています。
アイテムの数が多かったり、横軸より長くなる場合でも下記のように表示できます。
Timesheet.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
<head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head>
Step 2: HTML
タイムスケジュールシートを配置する空のdivを用意します。
<div id='timesheet'></div>
Step 3: JavaScript
一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。
new Timesheet('timesheet', 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{width:720px;height:292px;margin:0 auto};
.timesheet{border-top:1px solid rgba(250,250,250,0.5);
background-color:#333;position:relative};
sponsors
