jQuery　Googleカレンダー風スケジュール表　タイムテーブル

jQueryでスケジュール表もしくはタイムテーブルっぽいもの

仕事でスケジュール管理のシステム開発を行った際に作った、プラグインをちょいと改良したので公開です。
プラグイン化する意味はあったのかどうかは置いておいて、必要情報を与え要素を動かした場合変更後の時間などを返却してくれます。

レイアウトは自分で組まないといけません。。。

ちなみにタイトルのgoogle風ってのは要素を動かしたり移動出来る所です。一言詐欺になってたらすみません。

動作環境、jQueryバージョン

jquery-1.9.1
jquery.easing.1.3.js
Firefox 27.0.1

サンプル画面

DEMO

概要

jQueryのdraggableとresizableを使用し移動エリア(画像：テーブルの時間の下に配置された部分)を移動出来るようにしてます。
あとはdraggableとresizableの「stop」オプションを使用し、移動エリアの移動が終ったら現在の一から変更後の時間を計算してます。

レイアウト

jQueryのdraggableとresizableの「grid」オプションで一度に移動できる幅の指定を行ってます。
今回は横移動25pxずつなので、テーブル内の時間に当たる部分にdivをボーダーを含め25pxになるようにひたすら並べてます。
テーブルレイアウトのみで挑戦しましたが、どうしてもぴったりにならず、Googleカレンダーを参考にしたらdivを使っていたのを参考に組みました。

		
		

		

		

		


		
		

		

		

		

		...略

移動エリアは適切な時間に対する要素の長さを計算し、絶対位置「position:absolute」で指定して配置します。
表を囲んでいる「div#contents」には「position:relative」を指定してます。
表のエリアにrelativeを指定しないとブラウザの右上を基準として表示されてしまい、
思った所に配置されません。

	

	
start:10:00 end:12:00

script

プラグインの中身でdraggableとresizableを使用してます。
中身の一部ですが、

[対象ノード].draggable({
	// 一度に移動できる幅を指定します。
	grid: [ 横方向, 縦方向 ],
 	// 親要素内での移動を指定する。
	containment: "parent",
	// 要素の移動が終った後の処理
 	stop: function(event, ui) {
	// uiには要素の移動前と移動後のオフセットなどが入ります。
	// ここに時間計算の処理を書いてます。
	}
});

・プラグインのオプション
移動幅を固定してますが、resizableの方は移動エリアにcssでpaddingやmarginを指定すると、
その分のサイズを抜いた値で指定しないと動かした時に誤差が生じてしまいます。

記事を書きました。
jQuery　draggable,resizable　要素のサイズがずれる

startOffsetYとstartOffsetXでスケジュール表の初期位置を指定してます。
何処から始まるのか分からないので教えてあげてます。

15分刻みで移動させてますが、移動は場当たりの時間が分からないのでwidthTimeで教えてあげてます。

	$('.mn').rcSchedule({
		draggableGridX:25, 	// ノードの一度に移動できる横幅
		draggableGridY:100, 	// ノードの一度に移動できる縦幅
		resizableGridX:25, 	// ノードのサイズ変更できる横幅
		resizableGridY:0, 	// ノードのサイズ変更できる縦幅
		resizableMaxH:88, 	// ノードの高さを維持させる　高さの最大値
		resizableMinH:88,	// ノードの高さを維持させる 高さの最小値
		startOffsetX:150, 	// 要素の初期位置　左から何pxの位置がノードのスタート位置になるか
		startOffsetY:50, 	// 要素の初期位置　上から何pxの位置がノードのスタート位置になるか
		startTime:"10:00",	// スケジュール表の開始時間
		endTime:"20:00",	// スケジュール表の終了時間
		widthTime:900, 		// 1移動幅辺りの時間(秒)　15分:900秒
		callback :
		function(node, params){
			// 処理が終わった後に呼び出す処理、関数を書きます。
			// 非同期でサーバーにデータを送ったりモーダルウインドウをだしたりなど
		}
	});

nodeには選択された要素のDOM情報が入ってます。
paramsの中身には、
・originalStartTime　要素の元の開始時間(0時を基準とし秒で表したもの)
・originalStartTimeF　originalStartTimeをHH:iiで整形したもの
・originalEndTime　要素の元の終了時間(0時を基準とし秒で表したもの)
・originalEndTimeF　originalEndTimeをHH:iiで整形したもの
・changeStartTime　要素の変更後の開始時間(0時を基準とし秒で表したもの)
・changeStartTimeF　changeStartTimeをHH:iiで整形したもの
・changeEndTime　要素の変更後の終了開始時間(0時を基準とし秒で表したもの)
・changeEndTimeF　changeEndTime　をHH:iiで整形したもの
・height_offset 高さ移動があった場合の移動幅
・outside　引数で与えられたスケジュール表の開始、終了を超えた場合false
・offset　jQueryのuiプロパティ

ほんの一部のみを公開してますが、実際の所は色々作りこまないとまったく意味をなさないです。
開発ではDBデータを参照し、スタッフの人数分スケジュールを取得し、移動要素(緑のエリア)を適切な場所に置き、要素の位置が変更されたらモーダルでスケジュール内容を出し確認が取れたらDBデータ更新。。。

他にもいろんな属性値が絡んでくるのでこんな単純ではありませんでしたが、何かの参考になればと思います。