イベントカレンダープラグイン(その3・FullCalendarでのカレンダーの出力)

イベントカレンダープラグインでは、jQueryのFullCalendarを使って、イベントカレンダーを比較的簡単に出力することができます。

1.イベントカレンダー出力用インデックステンプレートの作成

まず、イベントカレンダーを出力するために、インデックステンプレートを作成します。
サイトのデザインに合わせるために、メインページのテンプレートの内容をコピーして、イベントカレンダー用のテンプレートに貼り付けると簡単です。

2.イベントカレンダー用のdiv要素を追加

次に、テンプレートの中で、イベントカレンダーを出力したい位置に、以下のdiv要素を入れます。

<div id="calendar"></div>

3.イベントカレンダー出力用のコードを追加

次に、テンプレートの中で、</body>タグの直前に、以下のコードを追加します。

<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>
<mt:EventCalendarJSBlock>
    <$mt:EventCalendarJS id="calendar"$>
</mt:EventCalendarJSBlock>

なお、jQueryを他の位置ですでに組み込んでいる場合、上のコードの1行目は不要です。

4.カレンダー用div要素のIDの変更

カレンダー用のdiv要素のIDは、「calendar」ではない他の値にすることもできます。
その場合、手順3.のコードの4行目(MTEventCalendarJSタグ)で、「id="calendar"」の部分を、div要素のIDと同じにします。

例えば、カレンダー用のdiv要素のIDを「event_calendar」にしたとします。
この場合、MTEventCalendarJSタグを以下のように書きます。

<$mt:EventCalendarJS id="event_calendar"$>

5.スタイルシートの調整

組み込み先のページのスタイルシートによっては、カレンダーのデザインと合わなかったり、見た目があまり良くなかったりする場合もあります。
そのような場合には、適宜スタイルシートを修正します。

なお、カレンダーの各部に割り当てられるクラスやIDは、Webブラウザのデバッグ系の機能を使ってご確認ください。

お知らせ