サラリーマンのすらすらＩＴ日記

このFullCalendarは、JSON形式データを渡すと表示されます。JSON形式データはファイルでもいいし、PHPなどのサーバサイドプログラムでJSON形式として出力したものでも表示できます。

$('#calendar').fullCalendar({
    // ここで他のオプションを設定
    //
    events: "http://192.168.1.1/hogehoge.php?from=2010-01-01&to=2010-01-31"
});

サーバ192.168.1.1にあるhogehoge.phpは、指定した期間のデータを取ってきて（ここでは2010年1月1日から2010年1月31日まで）、クライアントに渡すというもので、これでFullCalendarに表示されます。

FullCalendarではeventのstart,endオプションは2010-01-01のように月日をゼロサプレスしない2桁の数値とし、しかも年・月・日の区切りは半角ハイフンでないとうまく動きません。

ここまではサンプルプログラムがしっかりしていたので、割合すんなりとできました。問題は上記のeventsオプションを動的に変える方法です。当然2月になると、PHPのパラメータを?from=2010-02-01&to=2010-02-28にしたいわけですが、このeventsオプションを書き変える方法が見つかりません。これにはハマってしまい、何日も悩みました。

「すべてのデータを取ってきて、表示は1カ月分だけ」とすると確かにできるのですが、将来データが増えていった時のデータ転送時間を考えると、避けたいことです。

悩んだ挙句得た結論は、eventsオプションでサーバにアクセスせずにjQueryの$.ajaxでサーバにアクセスして、得た結果を「自前で」FullCalendarに書くというやり方です。これで成功しました。

$.ajax({url: "http://192.168.1.1/hogehoge.php",
        dataType: 'json',
        data: {
            "from": firstOfMonth(),
            "to": lastOfMonth()
        },
        success: function(calEvent) {
            $('#calendar').fullCalendar('removeEvents');
                for (var i=0; i<calEvent.length; i++) {
                    $('#calendar').fullCalendar('renderEvent', calEvent[i]);
                }
        }
});

上記のfirstOfMonth,lastOfMonth関数は、現在の月の最初の日、最後の日をyyyy-mm-dd形式で返す自作関数です。

removeEvents,renderEventというメソッドは、FullCalendarのドキュメントに書かれています。

サンプルプログラムには、こういう例がありませんでした。サンプルプログラムの多くはそのままでは業務には使えないので、それを使える程度にまで調べていけなければいけません。

既成のツールを使うといっても、簡単にはいかないということです。

--------------
2010年2月11日追記：明日の記事にもっと効率的な書き方を紹介しています。