卒研で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)が切り替わります。例として週間表示と一日表示の例を挙げておきます。
- 週間表示
- 一日表示
基本的な使用方法は下記のようになります。
- 新規イベントの追加（日付をクリック）・既存イベントの更新（イベントをクリック）時には，下記のように画面下部に編集ウィンドウが開きますので，ここで追加・編集を行って下さい。
- イベントの消去は画面下部左の「ゴミ箱」までイベントをドラッグし，ドロップして下さい。確認画面が出て，「OK」ボタンを押すと即座に消去されます（ホントに消しちゃう不親切仕様）。
- イベントを全て保存したい時には画面下部の「データ登録！」ボタンをクリックして下さい。これで編集後のイベントが保存されます。但し，保存されるのは画面に表示されている範囲のイベントのみです。未保存かどうかのチェックはまだ行っていません（これも不親切仕様）。
MySQLデータベースとのやり取りはPHPスクリプトを介して行います。直接呼び出して使用しているのは下記の3つです。
- read.php ・・・データベースから保存されているイベントを読み込む。
- update.php・・・編集・新規追加したイベントを全部データベースに保存。
- delete.php・・・ゴミ箱に捨てられたイベントをデータベースから消去。
この3つのPHPスクリプトは，FullCalendarが用意しているutils.php(Eventクラス，isWithinDayRange関数等）を読み込み，データベース接続を行うため，下記に示すdatabase.phpを必ず冒頭で呼び出しています。
これら4つのPHPスクリプトも，./phpディレクトリに格納しておいて下さい。
以上，FullCalendarが用意している機能に加えて，新規に作成したdatabase.php, read.php, update.php, delete.php, index.phpを組み合わせて使いやすい（かな？）スケジュール帳機能が実現できました。
今後は，これを順次作っていく教育用コンテンツに仕上げていく予定です。