dhtmlxSchedulerを使ってみる

javascript

dhtmlxSchedulerは、Google Calendarライクなインタフェースを簡単に実現できるオープンソース(GPL2)のjavascriptライブラリーです。

私の開発しているinfoScoop Calendarもdhtmlxschdulerを利用させていただいています。せっかくですので、dhtmlxSchedulerの利用方法についてまとめて置こうと思います。

一応、前置きとして、少しだけinfoScoop Calendarについて説明すると、
infoScoop CalendarはdhtmlxSchedulerを利用したGoogle Calendar風のインタフェースに加えてクラシックなホワイトボード風のインタフェースを追加した、かゆいところに手が届くスケジューラを目指しています。
infoScoop Calendarは以下のようなシステム構成になっていて、dhtmlxSchedulerをベースにしたWebクライアントからCalDAVサーバー(Bedework)にアクセスする構造になっています。

まだ、バージョンは0.8ですが、オープンソースとしてはまずまずの出来だと思いますのでぜひ試してみてください。

では、本題のですがdhtmlxSchedulerの使い方について簡単に説明していきます。

まずは、PHPのサーバー実装を利用してMySQLにカレンダーデータを保存するサンプルを動かしてみます。

dhtmlxschedulerをここからダウンロードして、Apacheのhtdocsに展開します。

サンプルコードは以下のファイルです。

dhtmlxscheduler/samples/01_initialization_loading/05_loading_mysql.html

MySQLにイベントデータ格納用のデータベースを作成します。

$mysql create database sampleDB

作成したデータベースにテーブルと初期データを追加します。
sqldumpファイルがsamples/commonディレクトリにあります。

$cd /dhtmlxscheduler/samples/common
$mysql -uroot sampleDB < dump_events.sql

データベース接続情報は同ディレクトリのconfig.phpに記述します。上記の通りにデータベースを作成した場合は、編集の必要はありません。

<?php
	$server = "localhost";
	$user	= "root";
	$pass	= "";
	$db_name= "sampleDB";
?>

以下のURLを開くとイベントが表示されます。

http://<ホスト名>/dhtmlxscheduler/samples/01_initialization_loading/05_loading_mysql.html

保存もできています。


以上で、動作は確認できました。

次にサンプルコードの中身を見ていきます。

まず、dhtmlxschedulerのCSSとjavascriptは以下のように指定します。

また、dhtmlxschdulerを表示するための以下の雛形が必要になります。

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
		<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>

次に、scriptタグの中身を見ていきます。
前半はdhtmlxschedulerの各種設定を行っています。設定ははscheduler.configオブジェクトに指定します。

xml_dateは、予定の日付のフォーマットを指定しています。

scheduler.config.xml_date="%Y-%m-%d %H:%i";

lightboxは、予定の左にあるメニューの編集のアイコンをクリックすると表示される予定の詳細を入力するウィンドウのことです。
lightbox.sectoinsは、各予定の編集ウィンドウで表示されるフィールドの設定です。

scheduler.config.lightbox.sections=[
	{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
	{name:"location", height:43, type:"textarea", map_to:"details" },
	{name:"time", height:72, type:"time", map_to:"auto"}
]

編集ウィンドウを開いて[保存]ボタンをクリックすると、各フィールドは"name"に指定した値をキーとしたパラメータとしてPOSTされます(実際には、デフォルトではキー名は"<イベントID>_"になります)。

first_hourは、DayとWeekの時刻の先頭を指定します。4に設定するとタイムスケールの最初が4時になります。

scheduler.config.first_hour=4;

以下は、イベント編集画面で追加した"location"フィールドのラベルを指定しています。
section_<フィールド名>を指定します。

scheduler.locale.labels.section_location="Location";

その他、参照のみに利用する設定なども、scheduler.configオブジェクトに指定します。詳しくは、以下の本家のAPIドキュメントを参照してみて下さい。
http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:settings_config

次に、dhtmlxscheduler自体の初期化です。

scheduler.init('scheduler_here',null,"month");
scheduler.load("php/events.php?uid="+scheduler.uid());

init関数は以下のように呼び出します。
第1引数には、HTMLに記述した雛形の要素のID指定します。
第2引数には、表示するカレンダーの日付(Dateオブジェクト)を指定します。nullの場合は、カレンダーを表示した日付になります。
第3引数には、カレンダーの表示モード、日表示"day"、週表示"week"、付き表示"month"のいづれかを指定します。

load関数は、予定情報を取得するURLを指定します。
カレンダーのフォーマットはiCalendarか独自のXML形式になります。
ちなみに、infoScoopカレンダーはCalDAVのレスポンスをそのままdhtmlxschedulerに渡していますが、正規表現での解析になるので、WebDAVレスポンスをiCalendarに直さなくてもそのまま表示できます。

dataProcessorは、予定をサーバーに保存する場合に必要になります。参照のみの場合は必要ありません。

var dp = new dataProcessor("php/events.php");
dp.init(scheduler);

dataProcessorのコンストラクタには、サービスのURLを指定します。
init関数には、前に生成したschedulerオブジェクトを指定します。

サービスは、POSTリクエストを受け付ける単一のアクションとして実装します。
追加、更新、削除の区別は、"!nativeeditor_status"という名前のパラメータで、以下の値が送られます。

  • 追加: "inserted"
  • 削除: "deleted"
  • 更新: "updated"

また、上述でデフォルトでは、パラメータ名は"<イベントID>_<パラメータ名>"たとえば「1_!nativeeditor_status」のように送られると書きましたが、接頭辞の"<イベントID>_"を省略することもできます。setTransactionModeの第二引数にfalseを指定すると、パラメータ名が"!nativeeditor_status"で送られるようになります。

dp.setTransactionMode("POST",false);

(ところで、ここでのイベントIDは、レコードのIDまたはjavascript側で振られるIDでiCalendarのUIDとは関係ありません。)

dhtmlxschdulerのアーカイブに付属するサンプルではphpのサーバー実装ですが、私はPHPはよく分からないので、以下のURLから取得できるRailsのサンプルを見てみます。
http://support.dhtmlx.com/x-files/samples/ruby_scheduler.zip

	def dbaction
		#called for all db actions
		text = params["text"]
		start_date = params["start_date"]
		end_date = params["end_date"]		
		
		@mode = params["!nativeeditor_status"]
		@id = params["id"]
		@tid = @id
		
		case @mode
			when "inserted"
				n_rec = Event.new
				n_rec.title = text
				n_rec.start = start_date
				n_rec.end = end_date
				n_rec.save!
				
				@tid = n_rec.id
			when "deleted"
				n_rec=Event.find(@id)
  				n_rec.destroy
			when "updated"
				n_rec=Event.find(@id)
				n_rec.title = text
				n_rec.start = start_date
				n_rec.end = end_date
				n_rec.save!
		end
	end

Railsのサンプルの場合、このdbactionアクションのURLがdataProcessorのコンストラクタに渡されるURLになります。
あとは、パラメータ"!nativeeditor_status"でイベントの追加、削除、更新処理を記述しているのみです。簡単ですね。

以上で、dhtmlxschedulerの使い方について説明してみました。
単純な予定の共有などでしたらこれだけでも利用できそうです。