[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js

スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。

jQueryやAngular.JSなど他のスクリプトは不要です。

デモのアニメーション

Timesheet.js
Timesheet.js -GitHub

Timesheet.jsのデモ

デモは見た目のかっこよさだけでなく、ホバーでちょっとしたエフェクトも備えられています。

サイトのキャプチャ

デモページ

アイテムの数が多かったり、横軸より長くなる場合でも下記のように表示できます。

サイトのキャプチャ

Ilya Grigorik

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

top of page

©2018 coliss