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

この方法は、Movable Type 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』での動作を前提にしていますので、ブログの文字コードが異なる方は、ぜひ『小粋空間さま』の説明ページをご覧下さい。

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

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", 
"<$MTBlogID$>", "<$MTBlogArchiveURL$>
<MTEntries lastn="1" sort_order="descend">
<$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

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

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

2008年10月31日：追記

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