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

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

導入の参考にさせていただきましたのは、
小粋空間さまの『Ajax 月送りカレンダー(MT4版)』です。

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

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

アーカイブマッピングの方法はMT3とMT4で若干違いますので、ご注意を。
1.スクリプトの入手とアップロード

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

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

アップロード先は、ブログの/index.htmlと同じディレクトリを指定するのが基本です。
当サイトでは、他のMTでも利用するため、サイト全体でJavaScriptを管理する
ディレクトリ(http://my-domain.com/js/)に設置することにしました。
2.カレンダーテンプレートの作成

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

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

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

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

7.カレンダー用のCSSを追加。 8.ここまで設定してから再構築!!

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

2008年10月31日:追記

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



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です