こんにちはSI部の加藤(祐)です。
前回は「fullcalendar」のデザインやgoogleカレンダーとの連携について内容を紹介していきたいましたが、
今回はクリック等の様々な操作の際に独自の処理を入れる方法について紹介させていただきます。
fullcalendarの様々な操作に対するオプションの説明
fullcalendarではクリックや表示等のタイミングで独自処理が入れれるように様々なcallback関数が用意されています。
そのデフォルトで指定されているcallback関数に処理を追加することで独自の処理をいれることができます。
ここでは、よく使うオプションの簡単な説明を行っていきます。
クリックやhoverなどの操作に対するcallback関数
dayClick (callback) : 予定表のslotをクリックした際の処理を記述できます
callback関数の引数に以下の引数が提供されています。
・date(slotの依存する日付)
・allDay(全日をクリックしたかどうか全日の場合はtrue)
・jsEvent(座標などjsの情報)
・view(カレンダータイトルや表示モードの情報)
eventClick (callback) : 登録してある予定(イベント)がクリックされた際の処理を記述できます
callback関数の引数に以下の引数が提供されています。
・event(イベントの開始終了日時なの情報)
・allDay(全日をクリックしたかどうか全日の場合はtrue)
・jsEvent(座標などjsの情報)
eventMouseover (callback) : 登録してある予定(イベント)の上をマウスが通過した際の処理を記述できます
callback関数の引数に以下の引数が提供されています。
・event(イベントの開始終了日時なの情報)
・allDay(全日をクリックしたかどうか全日の場合はtrue)
・jsEvent(座標などjsの情報)
eventMouseout (callback) : 登録してある予定(イベント)の上からマウスが離れた際の処理を記述できます
callback関数の引数に以下の引数が提供されています。
・event(イベントの開始終了日時なの情報)
・allDay(全日をクリックしたかどうか全日の場合はtrue)
・jsEvent(座標などjsの情報)
select (callback) : 予定表のslotをクリックした際の処理を記述できます
(dayclickとは違いslotの開始、終了日時を取得できます)
callback関数の引数に以下の引数が提供されています。
・startDate(slotの開始日付)
・endDate(slotの終了日付)
・allDay(全日をクリックしたかどうか全日の場合はtrue)
・jsEvent(座標などjsの情報)
・view(カレンダータイトルや表示モードの情報)
イベント(予定)、ページングや表示モード変更の描画時操作に対するcallback関数
eventRender (callback) : イベント(予定)毎の描画時の処理を記述できます
callback関数の引数に以下の引数が提供されています。
・event(イベントの開始終了日時なの情報)
・element(イベントのhtml要素情報)
viewRender (callback) : カレンダー表記時(ページング等)毎の描画時の処理を記述できます
callback関数の引数に以下の引数が提供されています。
・view(カレンダータイトルや表示モードの情報)
・element(html要素情報)
上記callback関数に処理を追加することで独自の処理を入れることできます。
いくつか実装例をご紹介します。
クリックした日付を赤くする
dayClick のcallback関数を使用します。
記述内容
カレンダー画面
クリックしたイベント(予定)を赤くする
eventClick のcallback関数を使用します。
記述内容
カレンダー画面
マウスカーソルがあたっているイベント(予定)を赤くする
eventMouseover、eventMouseout のcallback関数を使用します。
記述内容
カレンダー画面
最後に
今回はクリックや描画にの独自処理のあとのcallback関数の記述について説明させていただきました。
次回はfullcarendarが提供するカレンダーにイベント(予定)を登録するmethodの紹介や
ちょっとしたカスタマイズテクニックなどを紹介していきます
ご一読頂き有り難うございました。
