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
●テンプレートの内容(テキストエリア)・・・ここはまずは基本的な記述で(あとからカスタマイズはする予定)

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

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

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

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

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

2008年10月31日:追記

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



コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください