Ajaxを利用した月送りのカレンダー（MT4用）

Ｍｏｖａｂｌｅ　Ｔｙｐｅはディフォルトでは前の月、次の月の表示はありません。
月別のカテゴリーから前の月のアーカイブ記事をたどることも出来ますが、
できれば簡単に月の移動をさせたいなぁ・・・ということで、
月送りカレンダーのＡｊａｘ版を導入してみました。

導入の参考にさせていただきましたのは、
小粋空間さまの『Ａｊａｘ　月送りカレンダー（ＭＴ４版）』です。

導入方法が詳しく紹介されていますが、自分用のカスタマイズをメモメモ。

この方法は、MovableType 4 版の Ajax 月送りカレンダーのカスタマイズです。
リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

アーカイブマッピングの方法はＭＴ３とＭＴ４で若干違いますので、ご注意を。
１．スクリプトの入手とアップロード

使用するスクリプトは3つあります。

prototype.js （小粋空間で紹介されているリンク先は見つからず、入手先を変更しました）
ajaxCalendar.js
dayChecker.js （「２．ダウンロード」にある dayChecker.js をクリック）

アップロード先は、ブログの/index.htmlと同じディレクトリを指定するのが基本です。
当サイトでは、他のＭＴでも利用するため、サイト全体でＪａｖａＳｃｒｉｐｔを管理する
ディレクトリ（http://my-domain.com/js/）に設置することにしました。
２．カレンダーテンプレートの作成

カレンダー用のテンプレートを新規に作成します。
管理メニューページで、「デザイン」→「テンプレート」→「アーカイブテンプレート」
→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

次の画面で、テンプレートの新規設定を作成します。
●テンプレート名：「カレンダー」
●ファイルへのリンク→設定しなくてもＯＫ
●テンプレートの内容（テキストエリア）・・・ここはまずは基本的な記述で（あとからカスタマイズはする予定）

    <div class="widget-calendar widget">
    <h3 class="widget-header"><MTArchivePrevious>
    <a href="javascript:void(0);" 
    onclick="changeMonth('<$MTBlogArchiveURL$>
    <MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a> 
    </MTArchivePrevious>
    <$MTArchiveDate format="%B %Y"$><MTArchiveNext> 
    <a href="javascript:void(0);" 
    onclick="changeMonth('<$MTBlogArchiveURL$>
    <MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
    </MTArchiveNext></h3>
    <div class="widget-content">
    <table summary="<MTArchiveDate format="%Y/%m">">
    <tr height="15">
    <th abbr="Sunday" class="sunday">Sun</th>
    <th abbr="Monday">Mon</th>
    <th abbr="Tuesday">Tue</th>
    <th abbr="Wednesday">Wed</th>
    <th abbr="Thursday">Thu</th>
    <th abbr="Friday">Fri</th>
    <th abbr="Saturday" class="saturday">Sat</th>
    </tr>
    <MTCalendar month="this">
    <MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
    <td><MTCalendarIfBlank><MTElse><span></MTElse>
    </MTCalendarIfBlank><MTCalendarIfEntries>
    <MTEntries lastn="1">
    <a href="<$MTEntryLink archive_type="Daily"$>">
    <$MTCalendarDay$></a>
    </MTEntries>
    </MTCalendarIfEntries>
    <MTCalendarIfNoEntries><$MTCalendarDay$>
    </MTCalendarIfNoEntries>
    <MTCalendarIfBlank>
    <MTElse></span></MTElse></MTCalendarIfBlank></td>
    <MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
    </table>
    </div>
    </div>

ここまで設定したら、まずは『保存』
※この設定は、『UTF-8』での動作を前提にしていますので、ブログの文字コードが異なる方は、ぜひ『小粋空間さま』の説明ページをご覧下さい。

以降は説明通りに・・・３．カレンダーテンプレートを月別テンプレートに関連づけ（アーカイブマッピング）４．カレンダーに表示されている日付からのリンク用に、日別アーカイブを追加設定（アーカイブマッピング）５．テンプレートを修正。ヘッダーテンプレートに、先ほどアップロードした３つのスクリプトを読み込むための記述を追加。６．カレンダー表示部分の設定カレンダーを表示させたい箇所に以下の記述を追加。

７．カレンダー用のCSSを追加。８．ここまで設定してから再構築！！

と、一晩かかって設置して何とか無事に表示されたようです。
トラブルシューティング（表示されない）などのトラブル対処法も
先述ページに紹介されていますので、カレンダーのカスタマイズに挑戦してみては？

2008年10月31日：追記

Ａｊａｘを利用したカレンダーですが、確認していると表示されない（または時がかかる）事もあるようです。
自分のパソコンの処理能力の問題なときもあります。
何ででしょう？

Follow me!

@goristyle