*

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

公開日: : 最終更新日:2014/09/09 jQuery, 開発

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

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

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

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

動作環境、jQueryバージョン

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

サンプル画面

rc_schedule.1.0
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データ更新。。。

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

関連記事

PHP substr エスケープ処理で文字化け

PHP substr 文字化け mb_substrで文字コードを合わせて切り取ればOKって記事は沢

記事を読む

Google Cloud Messaging プロジェクトナンバー API Key取得編 2014/07最新版

Google Cloud Messaging プロジェクトナンバー APK取得編 コンソールの仕様

記事を読む

Androidで課金アプリ作製 エラー編(-1008:Unknown error)

Androidで課金アプリ作製 エラー編 In-app Billing v3を使用したアプリ開発で

記事を読む

Apache 500 Internal Server Error

久しぶりに自宅のローカルサーバーを動かしたら「Server error!」が出てゑっ!? 解決方法

記事を読む

Androidで課金アプリ作製 定期購読サンプルコード編

Androidで課金アプリ作製 定期購読編 In-app Billing v3を使用したアプリ開発

記事を読む

Androidで課金アプリ作製 プロセス間通信予習編

Androidで課金アプリ作製 プロセス間通予習編 課金アプリを作成の際にaidlファイルを利用す

記事を読む

jQuery removeClass 特定のクラスを全て削除

特定のクラスを全て削除 フォームを作成した時に、入力項目に不備があった場合は目立つ様にinput属

記事を読む

jQuery 要素の相対位置

jQueryを使って要素の相対位置を調べる Google先生に「jquery offsetLeft

記事を読む

jQuery Google画像検索風プラグイン

Google画像検索風プラグイン rc_gallery_open こういったプラグインは数多の開

記事を読む

Macで ローカルサーバー構築 Apache設定編

Macで ローカルサーバー環境を構築するまで Apache設定編 ネットでの情報は必要最低限しか載

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

jQuery 水平スクロール&cssでカスタム可能なスクロールバーなプラグイン

水平スクロール&cssでカスタム可能なスクロールバーなプラグイン j

C言語 バッファオーバーランまで 関数の引数ポインタ

関数引数としてのポインタ 今回は関数引数としてのポインタに関して。

C言語 バッファオーバーランまで ポインタ考察編

趣旨 ただC言語を勉強してもモチベーションがあがり辛いので、 取り

Google Cloud Messaging プロジェクトナンバー API Key取得編 2014/07最新版

Google Cloud Messaging プロジェクトナンバー A

jQuery removeClass 特定のクラスを全て削除

特定のクラスを全て削除 フォームを作成した時に、入力項目に不備があっ

→もっと見る

PAGE TOP ↑