JavaScript による、時間範囲の表現( 出退勤等 )

サーバー側のデータを JavaScript 側で表現するという事を想定しています

css の設定に、jQuery を使っていますが、jQuery は特に必要ではありません。jQuery のプラグインにするより、この状態のほうがカスタマイズが容易だと思います。

※ rangebox の背景を画像にして目盛を付加するともっと表現力がアップすると思います

氏名	時間 ( 6:00 〜 28:00 )	開始	終了
浦岡 友也1		6:00	7:00
浦岡 友也2		8:00	10:00
浦岡 友也3		11:00	14:00
浦岡 友也4		15:00	19:00
高田 冬美1		20:00	25:00
高田 冬美2		20:00	27:00

ソースコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var start = 6 * 60;							// 開始時間(分)
var end = 28 * 60;							// 終了時間(分)
var base_range = end - start;				// 範囲時間
var base_width = 300;						// 表示幅
var block = base_width / (base_range/10);	// 10分単位の幅
// ***********************************************
// 時間範囲表示関数
// ***********************************************
function setRange(id,strTime1,strTime2) {

	var parts = strTime1.split(":");
	var h = parseInt( parts[0] );	// 時間部分
	var m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;		// start からの位置
	start_pos = m * block;			// 指定時間の開始位置

	parts = strTime2.split(":");
	h = parseInt( parts[0] );	// 時間部分
	m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;
	end_pos = m * block;
	// 二つ目は幅に変換
	block_width = end_pos - start_pos;

	// 幅を表現する BOX の開始と幅を設定( jQuery である必要はありません )
	$("#" + id).css({ "left": start_pos+"px", "width": block_width + "px" });

}

$(function() {

	setRange("timebar0001","6:00", "7:00");
	setRange("timebar0002","8:00", "10:00");
	setRange("timebar0003","11:00", "14:00");
	setRange("timebar0004","15:00", "19:00");
	setRange("timebar0005","20:00", "25:00");
	setRange("timebar0006","20:00", "27:00");

});
</script>

<style type="text/css">
.rangebox {
	width:100%;
	height: 35px;
	background-color:#e0e0e0;
	position: relative;
}
.rangebox div {
	position: absolute;
	background-color:#ff0000;
	height: 35px;
}

#lboxtable * {
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
	font-size: 16px;
}
#lboxtable table {
	table-layout: fixed;
	width:600px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	/* white-space: nowrap; */
}
</style>

<div id="lboxtable">
<table>
	<tbody>
		<tr>
			<td style='width:100px;'>氏名</td>
			<td style='width:300px;'>時間 ( 6:00 〜 28:00 )</td>
			<td>開始</td>
			<td>終了</td>
		</tr>
		<tr>
			<td>浦岡 友也1</td>
			<td><div class="rangebox"><div id="timebar0001"></div></div></td>
			<td>6:00</td>
			<td>7:00</td>
		</tr>
		<tr>
			<td>浦岡 友也2</td>
			<td><div class="rangebox"><div id="timebar0002"></div></div></td>
			<td>8:00</td>
			<td>10:00</td>
		</tr>
		<tr>
			<td>浦岡 友也3</td>
			<td><div class="rangebox"><div id="timebar0003"></div></div></td>
			<td>11:00</td>
			<td>14:00</td>
		</tr>
		<tr>
			<td>浦岡 友也4</td>
			<td><div class="rangebox"><div id="timebar0004"></div></div></td>
			<td>15:00</td>
			<td>19:00</td>
		</tr>
		<tr>
			<td>高田 冬美1</td>
			<td><div class="rangebox"><div id="timebar0005"></div></div></td>
			<td>20:00</td>
			<td>25:00</td>
		</tr>
		<tr>
			<td>高田 冬美2</td>
			<td><div class="rangebox"><div id="timebar0006"></div></div></td>
			<td>20:00</td>
			<td>27:00</td>
		</tr>
	</tbody>
</table>
</div>

JavaScript コンテンツ

jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法

IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル

JavaScript : DIV 内に時間範囲のボックスを表示する処理

jQuery/JavaScript : 存在しない可能性のある画像の代替表示

JavaScript : HTML 特殊文字を書き出すコード( ツール )

Twitter 縦書き intent

スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする

IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス

WEB フォントを使った「フェードイン、フェードアウト」

JS : テキストエリア内の選択文字列の置き換え

IE限定、ローカルファイル参照フィールドを使ったトリック