サイトアイコン 高性能計算研究室

卒研メモ: FullCalendar利用方法

 卒研でjQueryファミリーのJavaScriptライブラリであるFullCalendarを利用するテーマがありましたので,勉強がてら触ってみました。かなり粗削りですし,一応動いてスケジュールの追加・削除・保存もできるという最小限の機能しかありませんが,日本語のまとまった情報が見つかりませんでしたので,ここでまとめて公開しておきます。例によって無保証ですので,以下の記述は自己責任でお使い下さい。

 準備として,FullCalendar ver. 3.4.0をダウンロードして解凍し,カレントディレクトリ(./)を起点として,必要なJavaScriptファイル(moment.min.js, jquery.min.js, fullcalendar.js, locale-all.js)を./jsディレクトリに,CSSファイル(fullcalendar.css)を./cssディレクトリに,PHPスクリプト(utils.php)を./phpディレクトリにコピーしておいて下さい。

 次に,データベース”schedule”にテーブル”contents”を作り,5つのフィールド”id”, “start”, “end”, “title”, “memo”を保存できるようにします。

 カレントディレクトリに”index.php”を作り(まだPHPスクリプトは組み込まれていませんが,今後これにログイン機能などを作り込んでいきます),ここにFullCalendarを表示して操作できるようにします。完成版のindex.phpは下記の通りです。デフォルトは月表示(‘month’)です。

 完成版の画面(Chrome使用時)は下記のようになります。デバッグ用に右側にConsoleが開いてあります。JavaScriptの変数の中身を見たい時には重宝します。

 画面上部右の「月」「週」「日」ボタンで表示(view)が切り替わります。例として週間表示と一日表示の例を挙げておきます。

 基本的な使用方法は下記のようになります。

 MySQLデータベースとのやり取りはPHPスクリプトを介して行います。直接呼び出して使用しているのは下記の3つです。

 この3つのPHPスクリプトは,FullCalendarが用意しているutils.php(Eventクラス,isWithinDayRange関数等)を読み込み,データベース接続を行うため,下記に示すdatabase.phpを必ず冒頭で呼び出しています。

 これら4つのPHPスクリプトも,./phpディレクトリに格納しておいて下さい。

 以上,FullCalendarが用意している機能に加えて,新規に作成したdatabase.php, read.php, update.php, delete.php, index.phpを組み合わせて使いやすい(かな?)スケジュール帳機能が実現できました。

 今後は,これを順次作っていく教育用コンテンツに仕上げていく予定です。

モバイルバージョンを終了