イベントカレンダープラグイン（その11・FullCalendarを独自にカスタマイズする)

イベントカレンダープラグインでは、jQueryのFullCalendarと、Data APIを組み合わせて、カレンダーを出力しています。
FullCalendarを細かくカスタマイズしたい場合、JavaScriptのライブラリを利用してData APIを呼び出し、その結果を元にFullCalendarを表示するようにします。

1.div要素の追加

まず、FullCalendarを表示したいページのHTMLで、表示先の位置に、以下のようなdiv要素を入れます。

なお、div要素のIDは、「calendar」以外にしても構いません。

2.JavaScriptライブラリの組み込み

次に、必要なJavaScriptライブラリとHTMLに組み込みます。
HTMLの最後の方(</body>タグの直前)に、以下のscriptタグを入れます。

<script src="<$mt:StaticWebPath encode_html="1"$>jquery/jquery.min.js"></script>
<script type="text/javascript" src="<$mt:StaticWebPath$>data-api/v1/js/mt-data-api.js"></script>
<script type="text/javascript" src="<$mt:StaticWebPath$>plugins/EventCalendar/js/extension.js"></script>
<script src="<$mt:StaticWebPath encode_html="1"$>plugins/EventCalendar/js/fullcalendar.js"></script>

3.JavaScriptのコードの追加

次に、最低限のカレンダーを表示するために、手順2のscriptタグの後に以下のコードを追加します。
「#カレンダー用div要素のID」は、手順1で作ったdiv要素のIDに置き換えます。

<script type="text/javascript">
jQuery(function() {
  // Data API初期化
  var api = new MT.DataAPI({
    baseUrl:  '<$mt:CGIPath$>mt-data-api.cgi',
    clientId: 'example'
  });

  // FullCalendarの表示
  $('#カレンダー用div要素のID').fullCalendar({
    viewRender: function (view, element) {
      $('#カレンダー用div要素のID').fullCalendar('removeEvents');
      var param = {
        type: 'fullcalendar',
        startDate: view.visStart,
        endDate: view.visEnd
      };
      api.listEvents(<$mt:BlogID$>, param, function(response) {
        var events = response.items;
        $('#カレンダー用div要素のID').fullCalendar('addEventSource', events);
      });
    }
  });
});
</script>

10行目～23行目が、FullCalendarを表示する処理です。
viewRenderコールバックを利用して、カレンダーの表示が必要になった時（ページが開いたときや、月等が替わった時）に、Data APIでカレンダーの情報を読み込んで表示します。

FullCalendarに対して、viewRender以外の様々なパラメータを指定すれば、動作を細かくカスタマイズすることができます。
詳しくは、FullCalendarのドキュメントをご参照ください。