小粋空間: カレンダーアーカイブ

MultiCalendar プラグイン v0.02

January 4,2010 12:55 AM
Tag：[MovableType, MultiCalendar, Plugin]
Permalink

複数ブログのカレンダー情報を表示する際に使用する「MultiCalendar プラグイン」をMovable Type 5 用にバージョンアップしました。

１．変更箇所

変更は、ダイナミックパブリッシング部分を Movable Type 5.0 に対応させたのみです。

２．ダウンロード

プラグインは以下のリンクからダウンロードしてください。

MultiCalendar プラグイン

Comments [0] | Trackbacks [0]

Ajax ハイブリッド月送りカレンダー

December 1,2009 1:55 AM
Tag：[Calendar, Customize, MovableType]
Permalink

Movable Type 4 以降のバージョンで、ブログ記事が投稿されていない月のカレンダーも含めて月送りができるカレンダーのハイブリッド版です。

「Ajax ダイナミック月送りカレンダー」ではダイナミックパブリッシングを利用して、ブログ記事が投稿されていない月のカレンダーも含めた月送りカレンダーを紹介しましたが、ハイブリッド月送りカレンダーでは、該当月にブログ記事が存在する場合は、スタティックパブリッシングで生成されたカレンダーページを Ajax で読み込むようにしました。

また、カレンダーの月送りのリンク部分にも同じロジックを適用して、ダイナミック・スタティックの振り分けを行っています。動作イメージを図に示します。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js（ハイブリッド用）
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

２．プラグインのダウンロード・アップロード

下記のリンクをクリックして、GetQueryString プラグインをダウンロードします。このプラグインは、ダイナミックパブリッシングでカレンダーページを呼び出すときにクエリーを取得するためのものです。

GetQueryString_0_01.zip

ダウンロードしたアーカイブを展開し、中にある GetQueryString フォルダを plugins ディレクトリにアップロードします。

アップロード後、システム管理画面の「ツール」→「プラグイン」で GetQueryString が表示されていればOKです。

プラグイン一覧

３．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。

テンプレート一覧

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

再構築アイコンをクリックして、日別アーカイブページを生成してください。

４．カレンダーテンプレート作成（ダイナミックパブリッシング用）

ダイナミックパブリッシング対応のカレンダーを作成します。管理メニューの「デザイン」→「テンプレート」→「インデックステンプレート」→「インデックステンプレートを作成」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

テンプレート名（一番上のテキストフィールド）：カレンダー
出力ファイル名：calendar.php
テンプレートの種類：カスタムインデックステンプレート
ファイルへのリンク：（設定不要）
公開：ダイナミック
テンプレートの内容（テキストエリア）：下記

<mt:GetQueryString name="date" setvar="yearmonth" />
<mt:GetQueryString name="date" regex_replace="/^(\d\d\d\d).*/","\$1" setvar="year" />
<mt:GetQueryString name="date" regex_replace="/.*(\d\d)$/","\$1" setvar="month"/>
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:GetVar name="year" setvar="prev_year" />
<mt:if name="prev_month" eq="0">
  <mt:SetVar name="prev_month" value="12" />
  <mt:SetVar name="prev_year" op="--" />
</mt:if>
<mt:if name="prev_month" lt="10">
  <mt:GetVar name="prev_month" regex_replace="/(.*)/","0\$1" setvar="prev_month" />
</mt:if>
<mt:GetVar name="month" op="++" setvar="next_month" />
<mt:GetVar name="year" setvar="next_year" />
<mt:if name="next_month" eq="13">
  <mt:SetVar name="next_month" value="1" />
  <mt:SetVar name="next_year" op="++" />
</mt:if>
<mt:if name="next_month" lt="10">
  <mt:GetVar name="next_month" regex_replace="/(.*)/","0\$1" setvar="next_month" />
</mt:if>
<mt:setVarBlock name="current_prev_ym"><mt:getvar name="prev_year" /><mt:getvar name="prev_month"></mt:setVarBlock>
<mt:setVarBlock name="current_next_ym"><mt:getvar name="next_year" /><mt:getvar name="next_month"></mt:setVarBlock>
<mt:setVar name="prev_flag" value="0" />
<mt:setVar name="next_flag" value="0" />
<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveDate format="%Y%m" setvar="ym" />
  <mt:if name="ym" eq="$current_prev_ym">
    <mt:setVar name="prev_flag" value="1" />
  </mt:if>
  <mt:if name="ym" eq="$current_next_ym">
    <mt:setVar name="next_flag" value="1" />
  </mt:if>
</mt:ArchiveList>
<table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
  <caption class="calendarhead">
<mt:if name="prev_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="prev_year" />/<mt:getvar name="prev_month">/');">&#65308;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
</mt:if>
    <mt:GetVar name="year" />年<mt:GetVar name="month" />月
<mt:if name="next_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="next_year" />/<mt:getvar name="next_month">/');">&#65310;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
</mt:if>
  </caption>
  <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>
<mt:Calendar month="$yearmonth">
  <mt:CalendarWeekHeader>
  <tr>
  </mt:CalendarWeekHeader>
    <td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries><mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries></mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank><mt:Else></span></mt:Else></mt:CalendarIfBlank></td>
  <mt:CalendarWeekFooter>
  </tr>
  </mt:CalendarWeekFooter>
</mt:Calendar>
</table>

テンプレートの設定部分は次のようになります。

テンプレートの設定

５．カレンダーテンプレート作成（スタティックパブリッシング用）

ブログ管理画面の「デザイン」→「テンプレート」→「アーカイブ」→「アーカイブテンプレートを作成:ブログ記事リスト」をクリックし、次画面で下記を設定してください。

テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

<mt:ArchiveDate format="%m" setvar="month">
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:ArchiveDate format="%Y" setvar="prev_year" />
<mt:if name="prev_month" eq="0">
  <mt:SetVar name="prev_month" value="12" />
  <mt:SetVar name="prev_year" op="--" />
</mt:if>
<mt:if name="prev_month" lt="10">
  <mt:GetVar name="prev_month" regex_replace="/(.*)/","0$1" setvar="prev_month" />
</mt:if>
<mt:GetVar name="month" op="++" setvar="next_month" />
<mt:ArchiveDate format="%Y" setvar="next_year" />
<mt:if name="next_month" eq="13">
  <mt:SetVar name="next_month" value="1" />
  <mt:SetVar name="next_year" op="++" />
</mt:if>
<mt:if name="next_month" lt="10">
  <mt:GetVar name="next_month" regex_replace="/(.*)/","0$1" setvar="next_month" />
</mt:if>
<mt:setVarBlock name="current_prev_ym"><mt:getvar name="prev_year" /><mt:getvar name="prev_month"></mt:setVarBlock>
<mt:setVarBlock name="current_next_ym"><mt:getvar name="next_year" /><mt:getvar name="next_month"></mt:setVarBlock>
<mt:setVar name="prev_flag" value="0" />
<mt:setVar name="next_flag" value="0" />
<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveDate format="%Y%m" setvar="ym" />
  <mt:if name="ym" eq="$current_prev_ym">
    <mt:setVar name="prev_flag" value="1" />
  </mt:if>
  <mt:if name="ym" eq="$current_next_ym">
    <mt:setVar name="next_flag" value="1" />
  </mt:if>
</mt:ArchiveList>
<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<mt:if name="prev_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="prev_year" />/<mt:getvar name="prev_month">/');">&#65308;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
</mt:if>
    <mt:ArchiveDate format="%B %Y" /> 
<mt:if name="next_flag">
    <a href="javascript:void(0);" onclick="getCalendar_static('<mt:BlogArchiveURL />calendar/<mt:getvar name="next_year" />/<mt:getvar name="next_month">/');">&#65310;</a> 
<mt:else>
    <a href="javascript:void(0);" onclick="getCalendar_dynamic('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
</mt:if>
</caption>
<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>

保存後、アーカイブマッピングに「月別」を追加し、アーカイブのパスから「カスタム...」を選択し、「calendar/%y/%m/%i」を設定してください。

６．テンプレート修正

６．１外部ファイルのインクルード

ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「HTMLヘッダー（公開テンプレートの場合は「ヘッダー」）」をクリックし、下記の内容を追加して「保存」をクリック。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

注：利用しているテンプレートによって設定位置が異なりますが、ブラウザでページを表示したときに <head>～</head> の間（</head> の直前を推奨）になるように設定します。

６．２カレンダー表示部分の設定

「デザイン」→「ウィジェット」→ウィジェットテンプレートの「カレンダー」をクリックし、下記の内容に入れ替えたあと、「保存」をクリックします。「カレンダー」ウィジェットがない場合は、「ウィジェットテンプレートを作成」をクリックして以下の内容を設定してください。

<mt:Date format="%Y%m" setvar="current_month" />
<mt:setVar name="flag" value="0" />
<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveDate format="%Y%m" setvar="month" />
  <mt:if name="month" eq="$current_month">
    <mt:setVar name="flag" value="1" />
  </mt:if>
</mt:ArchiveList>
<div id="calendar"></div>
<script type="text/javascript">
<mt:if name="flag">
getCalendar_static("<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
<mt:else>
getCalendar_dynamic("<$MTBlogURL$>calendar.php?date=<MTDate format="%Y%m" $>");
</mt:if>
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

修正した「カレンダー」ウィジェットを利用していない場合は、ブログ管理画面の「デザイン」→「ウィジェット」をクリック、さらに利用しているウィジェットセットをクリックし、「インストール済み」にドラッグして「変更を保存」をクリックしてください。

７．CSS修正

「デザイン」→「テンプレート」→「スタイルシート」を選択し、下記の内容を追加して「保存および再構築」をクリックします。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

８．再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

９．注意事項

日別アーカイブは先に再構築しておいてください。日別アーカイブがなくても再構築エラーにはなりませんが、日付のリンクから日別アーカイブに移動できません。

2010.01.27
５項にアーカイブマッピングの説明を追加しました。

Comments [30] | Trackbacks [2]

Ajax ダイナミック月送りカレンダー

September 8,2009 1:23 AM
Tag：[Calendar, Customize, DynamicPublishing, MovableType]
Permalink

Movable Type 4 以降のバージョンで、ブログ記事が投稿されていない月のカレンダーも含めて月送りができるカレンダーです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

Ajax ダイナミック月送りカレンダー

このカスタマイズは下記のサイトで紹介されています。これまで月送りカレンダーのカスタマイズは色々行なってきましたが、ブログ記事が投稿されていない月のカレンダーの表示方法が思いつきませんでした。このアイデアは素晴らしいと思います。

ブロッけんＪｒ - Movable Type カレンダー

１．概要

Ajax ダイナミック月送りカレンダーの動作概要を図に示します（図をクリックすれば拡大します）。

①：ページを表示します
②：ページに埋め込んだスクリプトで Ajax 呼び出しを行ないます
③：Ajax から呼び出すページ（カレンダー）をダイナミックパブリッシングで起動します
④：ページを呼び出す際に、年月データをクエリーとして与え、プラグインで取得し、テンプレーとに引継ぎます
⑤：取得した年月データを MTCalendar タグの month モディファイアの値として利用し、該当月のカレンダーを生成します
⑥⑦：生成したデータを返却し、最初のページに表示します。表示されたカレンダーの前月・次月のリンクにも同じ仕組みを適用します。前月・次月の算出は、MTArchive 系テンプレートタグではなく、制御系テンプレートタグで計算します。

このような構造にすることで、ブログ記事がない月のカレンダーを含めた月送りが実現できます。

なお、上記の説明でお分かりの通り、このカスタマイズはダイナミックパブリッシングの利用が可能な環境に限ります。

以下、カスタマイズ方法です。

２．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

３．プラグインのダウンロード・アップロード

下記のリンクをクリックして、GetQueryString プラグインをダウンロードします。このプラグインは、ダイナミックパブリッシングでカレンダーページを呼び出すときにクエリーを取得するためのものです。

GetQueryString_0_01.zip

ダウンロードしたアーカイブを展開し、中にある GetQueryString フォルダを plugins ディレクトリにアップロードします。

アップロード後、システム管理画面の「ツール」→「プラグイン」で GetQueryString が表示されていればOKです。

プラグイン一覧

４．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。

テンプレート一覧

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

再構築アイコンをクリックして、日別アーカイブページを生成してください。

５．カレンダーテンプレート作成

管理メニューの「デザイン」→「テンプレート」→「インデックステンプレート」→「インデックステンプレートを作成」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

テンプレート名（一番上のテキストフィールド）：カレンダー
出力ファイル名：calendar.php
テンプレートの種類：カスタムインデックステンプレート
ファイルへのリンク：（設定不要）
公開：ダイナミック
テンプレートの内容（テキストエリア）：下記のいずれか

デフォルトテンプレートの場合

<mt:GetQueryString name="date" setvar="yearmonth" />
<mt:GetQueryString name="date" regex_replace="/^(\d\d\d\d).*/","\$1" setvar="year" />
<mt:GetQueryString name="date" regex_replace="/.*(\d\d)$/","\$1" setvar="month"/>
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:GetVar name="year" setvar="prev_year" />
<mt:if name="prev_month" eq="0">
  <mt:SetVar name="prev_month" value="12" />
  <mt:SetVar name="prev_year" op="--" />
</mt:if>
<mt:if name="prev_month" lt="10">
  <mt:GetVar name="prev_month" regex_replace="/(.*)/","0\$1" setvar="prev_month" />
</mt:if>
<mt:GetVar name="month" op="++" setvar="next_month" />
<mt:GetVar name="year" setvar="next_year" />
<mt:if name="next_month" eq="13">
  <mt:SetVar name="next_month" value="1" />
  <mt:SetVar name="next_year" op="++" />
</mt:if>
<mt:if name="next_month" lt="10">
  <mt:GetVar name="next_month" regex_replace="/(.*)/","0\$1" setvar="next_month" />
</mt:if>
 
<div class="widget-calendar widget">
  <h3 class="widget-header">
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
    <mt:GetVar name="year" />年<mt:GetVar name="month" />月
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
  </h3>
  <div class="widget-content">
    <table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
        <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>
<mt:Calendar month="$yearmonth">
  <mt:CalendarWeekHeader>
      <tr>
  </mt:CalendarWeekHeader>
        <td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries><mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries></mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank><mt:Else></span></mt:Else></mt:CalendarIfBlank></td>
  <mt:CalendarWeekFooter>
      </tr>
  </mt:CalendarWeekFooter>
</mt:Calendar>
    </table>
  </div>
</div>

公開テンプレートの場合

<mt:GetQueryString name="date" setvar="yearmonth" />
<mt:GetQueryString name="date" regex_replace="/^(\d\d\d\d).*/","\$1" setvar="year" />
<mt:GetQueryString name="date" regex_replace="/.*(\d\d)$/","\$1" setvar="month"/>
<mt:GetVar name="month" op="--" setvar="prev_month" />
<mt:GetVar name="year" setvar="prev_year" />
<mt:if name="prev_month" eq="0">
  <mt:SetVar name="prev_month" value="12" />
  <mt:SetVar name="prev_year" op="--" />
</mt:if>
<mt:if name="prev_month" lt="10">
  <mt:GetVar name="prev_month" regex_replace="/(.*)/","0\$1" setvar="prev_month" />
</mt:if>
<mt:GetVar name="month" op="++" setvar="next_month" />
<mt:GetVar name="year" setvar="next_year" />
<mt:if name="next_month" eq="13">
  <mt:SetVar name="next_month" value="1" />
  <mt:SetVar name="next_year" op="++" />
</mt:if>
<mt:if name="next_month" lt="10">
  <mt:GetVar name="next_month" regex_replace="/(.*)/","0\$1" setvar="next_month" />
</mt:if>
 
<table summary="<mt:GetVar name="year" />/<mt:GetVar name="month" />">
  <caption class="calendarhead">
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="prev_year" /><mt:getvar name="prev_month">');">&#65308;</a> 
    <mt:GetVar name="year" />年<mt:GetVar name="month" />月
    <a href="javascript:void(0);" onclick="getCalendar('<mt:BlogURL />calendar.php?date=<mt:getvar name="next_year" /><mt:getvar name="next_month">');">&#65310;</a>
  </caption>
  <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>
<mt:Calendar month="$yearmonth">
  <mt:CalendarWeekHeader>
  <tr>
  </mt:CalendarWeekHeader>
    <td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries><mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries></mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank><mt:Else></span></mt:Else></mt:CalendarIfBlank></td>
  <mt:CalendarWeekFooter>
  </tr>
  </mt:CalendarWeekFooter>
</mt:Calendar>
</table>

テンプレートの設定部分は次のようになります。

テンプレートの設定

６．テンプレート修正

６．１外部ファイルのインクルード

ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「HTMLヘッダー（公開テンプレートの場合は「ヘッダー」）」をクリックし、下記の内容を追加して「保存」をクリック。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

注：利用しているテンプレートによって設定位置が異なりますが、ブラウザでページを表示したときに <head>～</head> の間（</head> の直前を推奨）になるように設定します。

６．２カレンダー表示部分の設定

「デザイン」→「ウィジェット」→ウィジェットテンプレートの「カレンダー」をクリックし、下記の内容に入れ替えたあと、「保存」をクリックします。「カレンダー」ウィジェットがない場合は、「ウィジェットテンプレートを作成」をクリックして以下の内容を設定してください。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogURL$>calendar.php?date=<MTDate format="%Y%m" $>");
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

修正した「カレンダー」ウィジェットを利用していない場合は、ブログ管理画面の「デザイン」→「ウィジェット」をクリック、さらに利用しているウィジェットセットをクリックし、「インストール済み」にドラッグして「変更を保存」をクリックしてください。

７．CSS修正

「デザイン」→「テンプレート」→「スタイルシート」を選択し、下記の内容を追加して「保存および再構築」をクリックします。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

８．再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

９．注意事項

日別アーカイブは先に再構築しておいてください。日別アーカイブがなくても再構築エラーにはなりませんが、日付のリンクから日別アーカイブに移動できません。

１０．その他

このカスタマイズではインデックステンプレートのみを使用しましたが、ブログ記事のある月はアーカイブテンプレート、そうでない月はインデックステンプレートを利用するという、ハイブリッドな月送りカレンダーについても検討中です。

Comments [19] | Trackbacks [1]

複数ブログの情報をひとつのカレンダーにまとめて表示する

March 20,2009 12:55 AM
Tag：[Calendar, Customize, MovableType, MultiCalendar]
Permalink

先日公開した「MultiCalendar プラグイン」を利用して、Movable Type 4 で複数ブログの情報をひとつのカレンダーにまとめて表示するカスタマイズを紹介します。

下のカレンダーは「Main」ブログで作成したカレンダーに、「Main」「Sub1」「Sub2」「Sub3」の4つのブログの情報（ブログ記事タイトル）を表示させた例です。同じ日に複数のブログのブログ記事タイトルが表示されています。

カレンダー

MultiCalendar プラグインはダイナミックパブリッシングにも（多分）対応しているので、それぞれでうまく動作するサブテンプレートを紹介します。

１．スタティックパブリッシング（その1）

下記のカレンダー表示用のサブテンプレートを、テンプレートモジュールまたはウィジェット、あるいはインデックステンプレートに貼り付けてください。

<mt:setVar name="undef(calendar_data)" />
<mt:Blogs include_blogs="2,3,4">
  <mt:blogID setvar="blog_number" />
  <mt:setVar name="counter" value="1" />
  <mt:MultiCalendar blog_id="$blog_number">
    <mt:CalendarIfEntries>
      <mt:Entries>
        <mt:setVarBlock name="calendar_data[$counter]" append="1"><li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li></mt:setVarBlock>
      </mt:Entries>
    </mt:CalendarIfEntries>
    <mt:CalendarIfNoEntries>
      <mt:setVar name="calendar_data[$counter]" append="1" value="" />
    </mt:CalendarIfNoEntries>
    <mt:setVar name="counter" op="++" />
  </mt:MultiCalendar>
</mt:Blogs>
 
<mt:IfArchiveTypeEnabled archive_type="Individual">
<div class="widget-calendar widget">
  <h3 class="widget-header"><$mt:Date format="%B %Y"$></h3>
  <div class="widget-content">
    <table summary="リンク付きのカレンダー">
      <tr>
        <th abbr="日曜日">日</th>
        <th abbr="月曜日">月</th>
        <th abbr="火曜日">火</th>
        <th abbr="水曜日">水</th>
        <th abbr="木曜日">木</th>
        <th abbr="金曜日">金</th>
        <th abbr="土曜日">土</th>
      </tr>
<mt:setVar name="counter" value="1">
<mt:Calendar>
  <mt:CalendarWeekHeader>
      <tr>
  </mt:CalendarWeekHeader>
        <td>
  <mt:CalendarIfEntries>
          <span><$mt:CalendarDay$></span>
  </mt:CalendarIfEntries>
  <mt:CalendarIfNoEntries>
          <span><$mt:CalendarDay$></span>
  </mt:CalendarIfNoEntries>
<ul><mt:getVar name="calendar_data[$counter]" /></ul>
  <mt:CalendarIfBlank>&nbsp;</mt:CalendarIfBlank>
        </td>
  <mt:CalendarWeekFooter>
      </tr>
  </mt:CalendarWeekFooter>
  <mt:setVar name="counter" op="++">
</mt:Calendar>
    </table>
  </div>
</div>
</mt:IfArchiveTypeEnabled>

複数ブログの情報を収集するには、サブテンプレート前半の、MTBlogs タグと MTMultiCalendar タグ、MTEntries タグを組み合わせたもので、取得したデータを配列変数に取得します。

配列変数は、「日付+ブランク（1日までの空の曜日分）」に対応したインデックスに、ブログ記事タイトルを設定します。また、ブランクも配列変数に設定します。

配列変数に設定する時に append モディファイアを利用しているので、MTBlogs タグによる繰り返し処理で、同一日に異なるブログの情報があっても、上書きせずに追加していきます。

そのあと、通常のMTCalendar タグで繰り返しながら、配列変数の値を出力します。MTCalendar タグはtable要素を出力するための役割として使っています。

２．スタティックパブリッシング（その2）

MTBlogs タグを使わずに、テンプレートモジュールを利用する例を示します。

まず、テンプレートモジュール「calendar」に次の内容を設定します。

<mt:setVar name="counter" value="1" />
<mt:MultiCalendar blog_id="$blog_number">
  <mt:CalendarIfEntries>
    <mt:Entries>
      <mt:setVarBlock name="calendar_data[$counter]" append="1"><li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li></mt:setVarBlock>
    </mt:Entries>
  </mt:CalendarIfEntries>
  <mt:CalendarIfNoEntries>
    <mt:setVar name="calendar_data[$counter]" append="1" value="" />
  </mt:CalendarIfNoEntries>
  <mt:setVar name="counter" op="++" />
</mt:MultiCalendar>

次にインクルード元に次のテンプレートを設定します。

<mt:include module="calendar" blog_number="2" />
<mt:include module="calendar" blog_number="3" />
<mt:include module="calendar" blog_number="4" />
 
<mt:IfArchiveTypeEnabled archive_type="Individual">
<div class="widget-calendar widget">
  <h3 class="widget-header"><$mt:Date format="%B %Y"$></h3>
  <div class="widget-content">
    <table summary="リンク付きのカレンダー">
      <tr>
        <th abbr="日曜日">日</th>
        <th abbr="月曜日">月</th>
        <th abbr="火曜日">火</th>
        <th abbr="水曜日">水</th>
        <th abbr="木曜日">木</th>
        <th abbr="金曜日">金</th>
        <th abbr="土曜日">土</th>
      </tr>
<mt:setVar name="counter" value="1">
<mt:Calendar>
  <mt:CalendarWeekHeader>
      <tr>
  </mt:CalendarWeekHeader>
        <td>
  <mt:CalendarIfEntries>
          <span><$mt:CalendarDay$></span>
  </mt:CalendarIfEntries>
  <mt:CalendarIfNoEntries>
          <span><$mt:CalendarDay$></span>
  </mt:CalendarIfNoEntries>
<ul><mt:getVar name="calendar_data[$counter]" /></ul>
  <mt:CalendarIfBlank>&nbsp;</mt:CalendarIfBlank>
        </td>
  <mt:CalendarWeekFooter>
      </tr>
  </mt:CalendarWeekFooter>
  <mt:setVar name="counter" op="++">
</mt:Calendar>
    </table>
  </div>
</div>
</mt:IfArchiveTypeEnabled>

３．ダイナミックパブリッシング用

ダイナミックパブリッシングでは配列変数がうまく動作しないので、ハッシュ変数を利用します。
サブテンプレートの構造は１項とほぼ同じです。

<mt:setVar name="undef(calendar_data)" />
<mt:Blogs include_blogs="2,3,4">
  <mt:BlogID setvar="number" />
  <mt:setVar name="counter" value="1" />
  <mt:MultiCalendar blog_id="$number">
    <mt:CalendarIfEntries>
      <mt:Entries blog_ids="$number">
        <mt:setVarBlock name="calendar_data" key="$counter" append="1"><li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li></mt:setVarBlock>
      </mt:Entries>
    </mt:CalendarIfEntries>
    <mt:CalendarIfNoEntries>
    </mt:CalendarIfNoEntries>
    <mt:setVar name="counter" op="++" />
  </mt:MultiCalendar>
</mt:Blogs>
 
<mt:IfArchiveTypeEnabled archive_type="Individual">
<div class="widget-calendar widget">
  <h3 class="widget-header"><$mt:Date format="%B %Y"$></h3>
  <div class="widget-content">
    <table summary="リンク付きのカレンダー">
      <tr>
        <th abbr="日曜日">日</th>
        <th abbr="月曜日">月</th>
        <th abbr="火曜日">火</th>
        <th abbr="水曜日">水</th>
        <th abbr="木曜日">木</th>
        <th abbr="金曜日">金</th>
        <th abbr="土曜日">土</th>
      </tr>
<mt:setVar name="counter" value="1">
<mt:Calendar>
  <mt:CalendarWeekHeader>
      <tr>
  </mt:CalendarWeekHeader>
        <td>
  <mt:CalendarIfEntries>
          <span><$mt:CalendarDay$></span>
  </mt:CalendarIfEntries>
  <mt:CalendarIfNoEntries>
          <span><$mt:CalendarDay$></span>
  </mt:CalendarIfNoEntries>
<ul><mt:getVar name="calendar_data" key="$counter" regex_replace="/Array/","" /></ul>
  <mt:CalendarIfBlank>&nbsp;</mt:CalendarIfBlank>
        </td>
  <mt:CalendarWeekFooter>
      </tr>
  </mt:CalendarWeekFooter>
  <mt:setVar name="counter" op="++">
</mt:Calendar>
    </table>
  </div>
</div>
</mt:IfArchiveTypeEnabled>

一番最初の日に「Array」と表示されてしまうので、regex_replace モディファイアで除去しています。

４．CSS

冒頭のカレンダーのスタイルは次の通りです。カレンダー用ではありませんがご参考まで。

table {
    margin-left: 5px;
    color: #666;
    border: 1px solid #ccc;
    border-collapse: separate;
    border-spacing: 1px;
}
table th {
    color: #444;
    padding: 5px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #e1e2e6;
}
table td {
    padding: 2px 5px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #eff2f3;
}
table td ul {
    marginn:0;
    padding:0;
    list-style:none;
}
table td {
    text-align:center;
}

Comments [0] | Trackbacks [0]

JavaScript カレンダー修正（シルバーウィーク対応）

February 17,2009 12:55 AM
Tag：[Calendar, JavaScript]
Permalink

現在公開中の「JavaScript カレンダー」をバージョンアップし、2009年9月のシルバーウィークに対応しました。

次のように、9月22日が休日表示になります。9月の表示はとりあえず2015年まで確認しています。

2009年9月のカレンダー

当サイトで公開している「Ajax 月送りカレンダー」や「休日表示付きリアルタイムカレンダー」など、カレンダーの休日の色を変えるカスタマイズをご利用の方は、下記のリンクから dayChecker.js をダウンロードして、現在ご利用の dayChecker.js と入れ替えてください。

WordPress の場合はプラグインファイルに同梱していますので、プラグインファイルの中にある dayChecker.js の内容を一部入れ替えてください。

Comments [7] | Trackbacks [0]

Ajax 月送りカレンダー（jQuery・MT4版）

February 16,2009 12:33 AM
Tag：[Ajax, Calendar, Customize, jQuery, MovableType]
Permalink

jQuery を使った Movable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

これまでは prototype.js を用いたカスタマイズを公開していましたが、「jQuery版を作ってほしい」というリクエストを頂きましたので、本エントリーにて説明致します。

Ajax 月送りカレンダーの概要は「Ajax 月送りカレンダー」をご覧ください）。

ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

jquery.js（"Download" のリンクをクリックし、次のページの「jquery-1.x.x.min.js」のリンクをクリックして、jquery.js というファイル名で保存、または保存後に jquery.js にリネーム）
ajaxCalendar_jquery.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar_jquery.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また jquery.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

テンプレート名（一番上のテキストフィールド）：カレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記のいずれか

デフォルトテンプレートの場合

<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>

公開テンプレートの場合

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<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>
</caption>
<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>

設定後は次のような感じになります。

テンプレート作成

設定が終わったら「保存」をクリックしてください。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「種類」から「月別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが月別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注：「月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%y/%m/%i

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

４．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注：この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

５．テンプレート修正

５．１ script 要素の追加

head 要素の内容が記述されているテンプレートモジュールを編集し、１項でダウンロードした外部ファイルの呼び出すための script 要素を追加します。利用中のテンプレートによって編集するテンプレートモジュールが異なるので、下記を参考にしてください。

MT4.0x/MT4.1x デフォルトテンプレート：「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」
MT4.2x デフォルトテンプレート：「デザイン」→「テンプレート」→「テンプレートモジュール」→「HTMLヘッダー」
公開テンプレート：「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」

MT 4.0x/MT4.1xのデフォルトテンプレート、または公開テンプレートの場合、編集画面にある、</head> の直前に下記を追加します。MT 4.2デフォルトテンプレートの場合、編集画面にある <$mt:CCLicenseRDF$> の直前に下記を追加し、「保存」をクリックします。

<script type="text/javascript" src="<$MTBlogURL$>jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar_jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

Movable Type 4.2x のデフォルトテンプレートでは、head 要素自体はメインページインデックステンプレートやアーカイブテンプレートに記述されています。

５．２カレンダー表示部分の設定

「デザイン」→「ウィジェット」→「カレンダー」をクリックし、ウィジェットの内容を下記と入れ替え、「保存」をクリック。MT4.0x をお使いの場合は、「デザイン」→「テンプレート」→「サイドバー（2カラム）」または「サイドバー（3カラム）」をクリックして、カレンダーを表示したい位置に貼り付けてください。

<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>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

５．３「カレンダー」ウィジェットの有効化

この作業は、「カレンダー」ウィジェットをブログに表示する設定になっていない場合のみ、行なってください。また、MT4.0x をお使いの方は、この作業をスキップしてください。

「デザイン」→「ウィジェット」→「3カラムのサイドバー(サブ)」または「3カラムのサイドバー(メイン)」をクリックし、５．２項で内容を変更した「カレンダー」ウィジェットを、ウィジェットセットを使って有効にします。デフォルトテンプレートを2カラムで使っている場合は、「2カラムのサイドバー」を選択してください。

選択したウィジェットセットで「カレンダー」が「利用可能」の一覧にある場合、「カレンダー」をドラッグして「インストール済み」に移動して「変更を保存」をクリックします（下）。「カレンダー」がすでに「インストール済み」にある場合は何もしなくて大丈夫です。

ウィジェットセット

６．CSS修正

「デザイン」→「テンプレート」→「スタイルシート」をクリックし、下記を追加して「保存および再構築」をクリックします。

デフォルトテンプレートの場合

確認中

公開テンプレートの場合

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

７．再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

８．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

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

に、例えば青色の

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

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

９．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $("#calendar").html() = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

１０．トラブルシューティング

１０．１一度も表示されない場合

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

カレンダーアーカイブの再構築ができていない
カレンダーアーカイブページへのパス設定が誤っている
テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、getCalendar() の3番目のパラメータに設定されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/", "1", "http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

１０．２一度表示され、リロードすると表示されなくなる場合

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるアーカイブパスが誤っている可能性があります。よくあるのは次のように最後の"/"が抜けているケースです。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/archives", "1", "http://user-domain/archives/calendar/yyyy/mm/");
</script>

これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。

2009.05.05
記事の内容をMT4.xのテンプレート名にあわせました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [36] | Trackbacks [0]

「Ajax 月送りカレンダー」の表示月をブログ記事の投稿月や月別アーカイブに連動させる

October 31,2008 12:55 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

「『Ajax 月送りカレンダー（MT4版）』で未来月のブログ記事を表示しない」の続きで、「Ajax 月送りカレンダー（MT4版）」をブログ記事の投稿月や日付アーカイブに連動させるためのカスタマイズです。

具体的には、

ブログ記事アーカイブ：投稿月のカレンダーを表示
日別・月別アーカイブ／日別カテゴリー・月別カテゴリーアーカイブ／日別ユーザー・月別ユーザーアーカイブ：該当月のカレンダーを表示
メインページ／カテゴリーアーカイブ／ユーザーアーカイブ：最新月（未来月を除く）のカレンダーを表示

となります。

ブログ記事アーカイブでの表示例（投稿月である9月のカレンダーを表示）

月別アーカイブでの表示例（アーカイブの月である8月のカレンダーを表示）

何人かの方から質問を頂いてますので、本エントリーで回答致します。

１．変更点（その1）

Ajax 月送りカレンダー（MT4版）の「５．２カレンダー表示部分の設定」を次の内容に入れ替えてください。

<div id="calendar"></div>
<script type="text/javascript">
<mt:if name="archive_class" like="monthly|daily">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:archiveDate format="%Y/%m/" />");
<mt:elseIf name="archive_class" like="weekly|yearly">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:date format="%Y/%m/" />");
<mt:elseIf name="entry_archive">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:entryDate format="%Y/%m/" />");
<mt:else>
<mt:date format="%Y/%m" setvar="current_date" />
<mt:setVar name="flag" value="0" />
<mt:archiveList archive_type="Monthly">
  <mt:unless name="flag">
    <mt:archiveDate format="%Y/%m" setvar="archive_date" />
    <mt:if name="archive_date" le="$current_date">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:getVar name="archive_date" />");
      <mt:setVar name="flag" value="1" />
    </mt:if>
  </mt:unless>
</mt:archiveList>
</mt:if>
</script>

当サイトの 4.2 対応のテンプレートでサイドバーに設置する場合は、次のように dd 要素でマークアップしてください。

<dd id="calendar"></dd>
<dd>
<script type="text/javascript">
<mt:if name="archive_class" like="monthly|daily">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:archiveDate format="%Y/%m/" />");
<mt:elseIf name="archive_class" like="weekly|yearly">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:date format="%Y/%m/" />");
<mt:elseIf name="entry_archive">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:entryDate format="%Y/%m/" />");
<mt:else>
<mt:date format="%Y/%m" setvar="current_date" />
<mt:setVar name="flag" value="0" />
<mt:archiveList archive_type="Monthly">
  <mt:unless name="flag">
    <mt:archiveDate format="%Y/%m" setvar="archive_date" />
    <mt:if name="archive_date" le="$current_date">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:getVar name="archive_date" />");
      <mt:setVar name="flag" value="1" />
    </mt:if>
  </mt:unless>
</mt:archiveList>
</mt:if>
</script>
</dd>

年別アーカイブ・週別アーカイブ（カテゴリ・ユーザー別含む）の場合は、日別や月別と同じ制御（MTArchiveDate タグで年月を取得）では正常に表示されない場合があり、制御がやや面倒なので現在月を表示するようにしています。ちなみに正常に表示されない理由は次の通りです。

年別アーカイブ：その年の最初の月を表示するが、その月に投稿がないと正常に表示されない。
週別アーカイブ：週が2ヶ月にまたがっていると、最初の月のカレンダーを表示するが、その月に投稿がないと正常に表示されない。

２．変更点（その2）

ajaxCalendar.js をアップロードする前に（アップロードしていたらダウンロードして）、任意のエディタで開き、下記の青色部分を追加してください。この追加を行わないと、最初に表示された（または月送りした）カレンダー月がクッキーにカレンダー年月が保存され、その年月のカレンダー表示が優先されてしまいます。

...前略...
function getCalendar(blogURL, id, path) {
    blogID = id;
    var cookie = readCookie("AjaxCal" + id);
    cookie = null;
    if(cookie != null) {
        if(blogURL.lastIndexOf("/") != blogURL.length - 1) {
            path = blogURL + "/calendar/" + cookie + "/";
        } else {
            path = blogURL + "calendar/" + cookie + "/";
        }
    }
    changeMonth(path);
}
...後略...

Comments [3] | Trackbacks [0]

「Ajax 月送りカレンダー」で未来月のブログ記事を表示しない

October 30,2008 12:03 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

公開中の「Ajax 月送りカレンダー（MT4版）」のデフォルト表示月は最新投稿があったブログ記事の月になるようにしていますが、未来の月に投稿があると、その月が表示されてしまいます。

「このような場合でも現在の月を表示したいのですが」というご質問を頂きましたので、本エントリーにて紹介致します。

１．変更点（その1）

Ajax 月送りカレンダー（MT4版）の「５．２カレンダー表示部分の設定」を次のように変更してください（青色部分を追加し、赤色部分を変更）。

変更前

<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>

変更後

<div id="calendar"></div>
<script type="text/javascript">
<mt:date format="%Y/%m" setvar="current_date" />
<mt:setVar name="flag" value="0" />
<mt:archiveList archive_type="Monthly">
  <mt:unless name="flag">
    <mt:archiveDate format="%Y/%m" setvar="archive_date" />
    <mt:if name="archive_date" le="$current_date">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:getVar name="archive_date" />");
      <mt:setVar name="flag" value="1" />
    </mt:if>
  </mt:unless>
</mt:archiveList>
</script>

変更前は、JavaScript を起動するパラメータに、最新のブログ記事が投稿されている年月を設定していますが、変更後は、再構築年月（MTDate）を現在月とみなして、その月以前に投稿されたブログ記事がある年月を、JavaScript を起動するパラメータに設定しています。
これで未来月に投稿があっても、現在月のカレンダーを表示します。

MTDate の代わりに JavaScript でダイナミックに年月を取得すると、月が切り変わった瞬間など、存在しない月のカレンダーを取得する可能性があるため、ここでは採用していません。

当サイトの 4.2 対応のテンプレートでサイドバーに設置する場合は、次のように dd 要素でマークアップしてください。

<dd id="calendar"></dd>
<dd>
<script type="text/javascript">
<mt:date format="%Y/%m" setvar="current_date" />
<mt:setVar name="flag" value="0" />
<mt:archiveList archive_type="Monthly">
  <mt:unless name="flag">
    <mt:archiveDate format="%Y/%m" setvar="archive_date" />
    <mt:if name="archive_date" le="$current_date">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL />calendar/<mt:getVar name="archive_date" />");
      <mt:setVar name="flag" value="1" />
    </mt:if>
  </mt:unless>
</mt:archiveList>
</script>
</dd>

２．変更点（その2）

Ajax 月送りカレンダー（MT4版）の「２．カレンダーテンプレート作成」のリストを、次のように変更してください（青色部分を追加）。

変更前

...前略...
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</MTArchiveNext>
...後略...

変更後

...前略...
<MTArchiveNext>
<mt:archiveDate format="%Y%m" setvar="archive_date" />
<mt:if name="archive_date" le="$current_date">
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</mt:if>
</MTArchiveNext>
...後略...

これはカレンダーの前後月のリンクで、未来月へのリンクを表示しない対処です。

３．謝辞

この手法は、WingMemo さんのブログで紹介されている、次の記事をヒントにカスタマイズさせて頂きました。ありがとうございました。

WingMemo - ダイナミックで月送りカレンダー(5) MT4版～現在の月編

Comments [4] | Trackbacks [0]

カテゴリー別 Ajax 月送りカレンダー（MT4版）

July 15,2008 2:22 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

Movable Type 4 版の「カテゴリー別 Ajax 月送りカレンダー」のカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。

これまでの月送りカレンダーは、ブログ全体のブログ記事を対象にしたものでしたが、本カスタマイズではカテゴリー別にカレンダーを表示するようにアレンジしたものです。通常の Ajax 月送りカレンダーのカスタマイズ方法は「Ajax 月送りカレンダー（MT4版）」をご覧ください。

きめ細かい制御ができていませんが、とりあえずβ版ということで公開します。このカスタマイズは Movable Type 4.2 で動作を確認していますが、4.1 でも大丈夫と思います。

ここでは公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js（本カスタマイズ専用です）
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

２．カテゴリ別カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

テンプレート名（一番上のテキストフィールド）：カテゴリ別カレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記

<table summary="<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<mt:ArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<mt:BlogArchiveURL />calendar/<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m/%i">');">&#65308;</a>
</mt:ArchivePrevious>
<mt:ArchiveDate format="%B %Y" /> 
<mt:ArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<mt:BlogArchiveURL />calendar/<mt:SubCategoryPath />/<mt:ArchiveDate format="%Y/%m/%i">');" >&#65310;</a>
</mt:ArchiveNext>
</caption>
<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>
<mt:CategoryLabel setvar="category_label">
<mt:Calendar category="$category_label" month="this">
<mt:CalendarWeekHeader><tr></mt:CalendarWeekHeader>
<td><mt:CalendarIfBlank><mt:Else><span></mt:Else></mt:CalendarIfBlank><mt:CalendarIfEntries>
<mt:Entries lastn="1"><a href="<mt:EntryLink archive_type="Daily" />"><mt:CalendarDay /></a></mt:Entries>
</mt:CalendarIfEntries><mt:CalendarIfNoEntries><mt:CalendarDay /></mt:CalendarIfNoEntries><mt:CalendarIfBlank>
<mt:Else></span></mt:Else></mt:CalendarIfBlank></td><mt:CalendarWeekFooter></tr></mt:CalendarWeekFooter></mt:Calendar>
</table>

設定後は次のような感じになります。

テンプレート作成

設定が終わったら「保存」をクリックしてください。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング作成

「種類」から「カテゴリ - 月別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが月別カテゴリアーカイブとして定義され、カレンダー用の「パス」が表示されます。
注：「カテゴリ - 月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。また、ご利用のテンプレートによってはチェックボックスが表示されない場合もありますが、問題ありません。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%-c/%y/%m/%i

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

４．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注：この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。4.2以降の「既定のブログ」では、「ブログ記事リスト」という名前のテンプレートがないので、「月別ブログ記事リスト」を選択してください。それもない場合は、月別アーカイブ用のテンプレートを選択してください。

テンプレート一覧

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

５．テンプレート修正

５．１外部ファイルのインクルード

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>～</head> の間に下記を追加して「保存」をクリック。

<mt:if name="module_category_archives">
<script type="text/javascript" src="<mt:BlogURL />prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />ajaxCalendar.js"></script>
<script type="text/javascript" src="<mt:BlogURL />dayChecker.js"></script>
</mt:if>

５．２カレンダー表示部分の設定

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2（またはサイドバー）」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

<mt:if name="module_category_archives">
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<mt:BlogArchiveURL />", "<mt:BlogID />", "<mt:BlogArchiveURL /><mt:Entries lastn="1" sort_order="descend">calendar/<mt:SubCategoryPath />/<mt:EntryDate format="%Y/%m/"  /></mt:Entries>");
</script>
</mt:if>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

６．CSS修正

「デザイン」→「テンプレート」→「スタイルシート（メインまたはベーステーマ）」を選択し、下記を追加して「保存および再構築」をクリックします。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

７．再構築

全てのページを再構築します。これでメインページ等を表示してカテゴリー別にカレンダーが表示されれば完成です。

2008.11.11
３項のパスが誤っていたので修正しました。また、「Ajax 月送りカレンダー（MT4版）」へのリンクを追加しました。

2007.03.02
日別アーカイブ追加の説明を修正しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [4] | Trackbacks [0]

Ajax 日めくりカレンダー（MT4版）

September 6,2007 1:55 AM
Tag：[Ajax, Calendar, MovableType]
Permalink

Movable Type 4 版の Ajax 日めくりカレンダーのカスタマイズです。

ご覧の通り、オーソドックスな日めくりカレンダーっぽい表示で、その下にはその日に投稿されたブログ記事（エントリー)タイトルが表示されます。リアルタイムカレンダー（本日の日付を太字で表示）および土・日・休日表示も盛り込まれています。

なお、厳密には日めくりではなく、投稿があった日のみを表示する「日送りカレンダー」です。

ここでは公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

このカスタマイズはかなり以前ご質問を頂いていたもので、元データとなるアーカイブに日別を使うか、月別を使って全ての日を表示するか、迷っているうちに公開が大変遅れてしまいました。この場をお借りしてお詫び申しあげます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxDateCalendar.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxDateCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。
次画面で下記を設定してください。

テンプレート名（一番上のテキストフィールド）：日めくりカレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記
注：テキストエリアにペーストする際はテキストエリア右上にある構文強調表示切替を「強調表示なし」を選択してから作業を行ってください。「構文強調表示」の状態でペーストするとテンプレートの内容の改行が失われます。

<table summary="<MTArchiveDate format="%Y/%m/%d">">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeDate('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%d/%f">');">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeDate('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%d/%f">');" >＞</a>
</MTArchiveNext>
</caption>
<tr><td class="calendarday"><span><a href="<$MTArchiveLink type="Daily"$>"><$MTArchiveDate format="%e" strip=""$></a></span></td></tr>
<tr><td class="calendartitle"><dl><MTEntries><dd><$MTEntryTitle$></dd></MTEntries></dl></td>
</table>

設定後は次のような感じになります。

テンプレート設定

設定が終わったら「保存」をクリックしてください。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを日別アーカイブに関連付け

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「種類」から「日別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが日別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注：「日別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%y/%m/%d/%f

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

４．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注：この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。チェックボックスは必ずチェックしてください。

日別アーカイブの追加

５．テンプレート修正

５．１外部ファイルのインクルード

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>～</head> の間に下記を追加して「保存」をクリック。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxDateCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

５．２カレンダー表示部分の設定

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2（またはサイドバー）」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

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

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

６．CSS修正

「デザイン」→「テンプレート」→「スタイルシート（メインまたはベーステーマ）」を選択し、下記を追加して「保存および再構築」をクリックします。

スタイルは叩き台レベルです。また機会があれば見直したいと思います。

#calendar {
    border: 1px solid #999;
    text-align: center;
    margin: 5px 0 10px;;
    color: #444444;
}
#calendar table {
    width: 153px;
    padding: 0;
    border-collapse: collapse;
    margin-right: auto;
    margin-left: auto;
}
#calendar .calendarhead {
    padding: 5px 0 0;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar td.calendarday {
    padding: 0;
    font-size: 80px;
    font-weight: normal;
    line-height: 100%;
}
#calendar td a {
    color: #333;
    text-decoration: none;
}
#calendar td a:hover {
    color: #fff;
    background: #333;
}
#calendar td.calendartitle dd {
    padding: 5px 10px;
    font-size: 10px;
    text-align: left;
    font-weight: normal;
}
#calendar .today {
    font-weight: bold;
    padding: 0;
    font-size: 80px;
    font-weight: bold;
    line-height: 100%;
}
#calendar .sunday,
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
    color: #e50003;
}
#calendar .holiday a:hover {
    color: #fff;
    background: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
    color: #0000ff;
}
#calendar .saturday a:hover {
    color: #fff;
    background: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

７．再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [0] | Trackbacks [0]

Ajax 月送りカレンダー（MT4版）

August 18,2007 3:33 AM
Tag：[Ajax, Calendar, Customize, MovableType, prototype]
Permalink

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

MT4 では、MT3 で紹介した「Ajax 月送りカレンダー」とは、アーカイブマッピングの方法が異なっており、「MT4でのカスタマイズ方法が分かりません」というリクエストを頂きましたので、本エントリーにて説明致します。
Ajax 月送りカレンダーの概要は割愛します（「Ajax 月送りカレンダー」をご覧ください）。

ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

テンプレート名（一番上のテキストフィールド）：カレンダー
ファイルへのリンク：（設定不要）
テンプレートの内容（テキストエリア）：下記のいずれか
注：テキストエリアにペーストする際はテキストエリア右上にある構文強調表示切替を「強調表示なし」を選択してから作業を行ってください。「構文強調表示」の状態でペーストするとテンプレートの内容の改行が失われます。

デフォルトテンプレートの場合

<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>

公開テンプレートの場合

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<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>
</caption>
<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>

設定後は次のような感じになります。

テンプレート作成

設定が終わったら「保存」をクリックしてください。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「種類」から「月別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが月別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注：「月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%y/%m/%i

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

４．日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注：この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択。

テンプレート一覧

アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

５．テンプレート修正

５．１外部ファイルのインクルード

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>～</head> の間に下記を追加して「保存」をクリック。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

５．２カレンダー表示部分の設定

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2（またはサイドバー）」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

<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>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

６．CSS修正

「デザイン」→「テンプレート」→「スタイルシート（メインまたはベーステーマ）」を選択し、下記を追加して「保存および再構築」をクリックします。

デフォルトテンプレートの場合

確認中

公開テンプレートの場合

#calendar {
    margin: 5px 0 10px;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定（下）を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

７．再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

８．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

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

に、例えば青色の

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

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

９．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

１０．トラブルシューティング

１０．１一度も表示されない場合

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

カレンダーアーカイブの再構築ができていない
カレンダーアーカイブページへのパス設定が誤っている
テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、getCalendar() の3番目のパラメータに設定されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/", "1", "http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

１０．２一度表示され、リロードすると表示されなくなる場合

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるアーカイブパスが誤っている可能性があります。よくあるのは次のように最後の"/"が抜けているケースです。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/archives", "1", "http://user-domain/archives/calendar/yyyy/mm/");
</script>

これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。

2007.08.21
２項と４項の「ブログ記事」を「ブログ記事リスト」に修正しました。

2007.11.08
５．２項のタグに一部誤りがありましたので修正致しました。

2008.02.04
typo を修正しました（Wen → Wed）。

2009.02.24
手順４の2枚目の画像を追加しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [177] | Trackbacks [17]

カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する

February 10,2007 1:12 AM
Tag：[Calendar, Customize, MovableType]
Permalink

当サイトで公開している Movale Type のカレンダーでは、日付のアンカーから日別アーカイブにジャンプするようにしていますが、これをエントリー・アーカイブにジャンプするように変更する方法を紹介します。

サンプルのMTタグは <MTCalendar>～</MTCalendar> のみ抜粋しています。

１．変更前のカレンダータグ部分

日付アーカイブにジャンプする仕組みは、MTEntryLink タグの archive_type 属性に "Daily" を指定しているからです（赤色部分）。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></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>

２．変更方法１

MTEntryLink タグの archive_type 属性を "Daily" から "Individual" に変更します（青色部分）。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Individual"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>

３．変更方法２

もうひとつは MTEntryLink を属性なしに変更する方法です。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>

なお、いずれの場合も、カレンダー用テンプレートタグの先頭と末尾に設定している

<MTIfArchiveTypeEnabled archive_type="Daily">
　　　　：
</MTIfArchiveTypeEnabled>

の2行は削除してください。
これは日別アーカイブの設定がされていない場合、その中に記述されたタグの処理を行わない（つまりカレンダーの生成を行わない）ようにするための条件タグです。

エントリー・アーカイブのリンクには MTEntryPermalink を利用する方法もありますが、実験してみたところ正常に動作しないようなので、ここでは対象外としました。

Comments [3] | Trackbacks [0]

Ajax 月送りカレンダー（縦型）

February 4,2007 12:21 AM
Tag：[Ajax, Calendar, MovableType]
Permalink

「Ajax 月送りカレンダー」の縦型版のカスタマイズを紹介します。下のスクリーンショットは完成例です。

Ajax 月送りカレンダー（縦型）

これまでに Movable Type の月送り縦型カレンダーを iframe を用いてカスタマイズを試みたのですが、クロスブラウザ問題、つまりブラウザによって表示の崩れが発生し、これを解消できないため、当サイトでは公開を見送ってました。
が、Ajax 版では iframe が不要になり、上記のような表示が可能になります。

以下に簡単なサンプルを作りましたので動作をお試しください。

Ajax 月送りカレンダー（縦型）サンプル

仕様

ここで紹介する月送りカレンダー（縦型）の主な仕様です。

Ajax を利用して縦型カレンダーを月送りにします。Ajax 化されるのはページ表示時および月送り時のカレンダー取得です
クッキーを利用して月送り状態を保持します
カレンダーの取得に失敗した場合、カレンダー表示エリアには何もされません（カスタマイズ可能）

以下、カスタマイズ方法です。テンプレートの指定はありませんので、CSS を変更すればどのテンプレートでもお使いになれると思います。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。

注：ここで配布している ajaxCalendar.js は縦型カレンダー専用です。テーブルタイプや横型カレンダーで配布している ajaxCalendar.js はお使いになれません。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a></MTArchivePrevious>&nbsp;<MTArchiveNext><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a></MTArchiveNext><br />
<$MTArchiveDate format="%Y"$><br />
<$MTArchiveDate format="%m"$>
</caption>
<MTCalendar month="this">
<MTCalendarIfBlank><MTElse><tr><td><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></td></tr></MTElse></MTCalendarIfBlank></MTCalendar></table>

設定が終わったら「保存」をクリックしてください。

なお、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストで2ヶ所出現する

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/index.html">');">＜</a>

の赤色部分を変更します。
例えば「archives」というパスを付与している場合は、

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="archives/calendar/%Y/%m/index.html">');">＜</a>

とします。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。

バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類：月別
テンプレート：カレンダー（←２項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。

出力フォーマット（3.2-ja 以降）

calendar/%y/%m/%i

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

４．テンプレート修正

カレンダーを表示させたいテンプレートに下記の設定を行います。

４．１外部ファイルのインクルード

<head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．２カレンダー表示部分の設定

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）の任意の位置下に、カレンダー表示用のタグ（青色部分）を追加します。
ここではサンプルとして、公開テンプレート・固定3カラムの左サイドバーと中央カラムの間に表示する方法を示します。

　　　　　：
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
 
<div id="links-center-box">
<div id="links-center">
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>
</div>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
　　　　　：

div id="calendar" は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

また、２項と同様、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストの赤色部分を修正します。
例えば archives というアーカイブパスを設定している場合は、下記の青色のように修正てください。

getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");

５．CSS修正

下記をスタイルシートに追加します。すでにカレンダー関係のスタイル設定が行われている場合は競合を避けるため、古い設定を削除（またはコメントアウト）してください。

IE7 の CSS ハック（*:first-child+html）も組み込んでいます。

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    margin-bottom: 3px;
    padding-bottom: 3px;
    font-size: 10px;
    letter-spacing: 0em;
    text-align: center;
    border-bottom: 1px solid #999999;
}
#calendar table {
    margin-left: 5px;
    _margin-left: 0;
    padding: 0;
    border-collapse: collapse;
}
*:first-child+html #calendar table {
    margin-left: 0;
}
#calendar td {
    margin: 0;
    padding: 2px;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.holiday,
.tholiday,
.holiday a:link,
.tholiday a:link {
    color: #e50003;
}
.saturday,
.tsaturday,
.saturday a:link,
.tsaturday a:link {
    color: #0000ff;
}
.tholiday,
.tsaturday,
.today {
    _margin: 0 2px;
    padding: 1px 2px;
    display: block;
    border: 1px solid #444444;
}

６．縦カレンダーをカラムレイアウトに挿入するための修正

当サイトで配布しているテンプレート（3カラム・固定レイアウト）を例に説明します。端的に申し上げますと 4 カラムに変更して、その中の1カラムをカレンダー表示用として利用します。

まず下記の CSS をスタイルシートに追加してください。

.layout-three-column #links-center-box {
    float: left;
    width: 40px;
}
.layout-three-column #links-center {
    padding: 10px 0 0;
    color: #ffffff;
}

追加したカレンダー分の幅（40px）を、全体の幅をひろげるか、中央カラムの幅を少なくすることで帳尻を合わせます。
中央カラム幅を変更しない場合は全体の幅を 40px ひろげます。

.layout-three-column #box {
    width: 890px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

中央カラム幅を変更する場合は中央カラム幅を 40px 少なくします。

.layout-three-column #content {
    float: left;
    width: 438px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

７．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

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

に、例えば青色の

<div id="calendar"><img src="[画像のURL]" /></div>

を追加することで、ページ描画でカレンダーが表示されるまでローディング画像を示すことができます。テキストも表示可能ですが、縦型では横幅に制約があるので画像を表示する方が良いでしょう。

月送りのリンククリック時はローディング画像は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは８項の設定と関連します）。

８．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください（きれいに表示する場合は「NG」等の短い文言に変更してください）。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、７項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、７項のローディング画像の代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

９．トラブルシューティング

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

カレンダーアーカイブの再構築ができていない
カレンダーアーカイブページへのパス設定が誤っている
ajaxCalendar.js の修正誤り
テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、そこに記述されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるカレンダーアーカイブへのパスが誤っている可能性があります。

また、縦型カレンダーをカラムレイアウトに組み込んでレイアウトが崩れる場合、カラム幅の計算が誤っています。スタイルシートで設定したカラム幅を見直してください。

2007.03.21 追記
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [0] | Trackbacks [0]

Ajax 月送りカレンダー（横型）

October 11,2006 12:11 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

「Ajax 月送りカレンダー」の横型版のカスタマイズを紹介します。

このカレンダーは、従来の月送りカレンダー（横型・iframe 利用）と比較して、下記のアドバンテージがあります。

クロスブラウザで悩まない
月送りのリンクの履歴がブラウザの履歴に残らない

「クロスブラウザで悩まない」というのは、これまでの月送り版・横型カレンダーは、iframe の中に表示するカレンダーの垂直位置が IE系と Mozilla 系で微妙に異なったため、CSSハック等で表示位置の微調整を行っていました。今回の Ajax 版では iframe が不要なため、この問題で悩む必要が（多分）なくなります。

以下に簡単なサンプルを作りましたので動作をお試しください。

Ajax 月送りカレンダー（横型）サンプル

仕様

ここで紹介する月送りカレンダー（横型）の主な仕様です。

Ajax を利用して横型カレンダーを月送りにします。Ajax 化されるのはページ表示時および月送り時のカレンダー取得です
クッキーを利用して月送り状態を保持します
カレンダーの取得に失敗した場合、カレンダー表示エリアには何もされません（カスタマイズ可能）

以下、カスタマイズ方法です。テンプレートの指定はありませんので、CSS を変更すればどのテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。

注：ここで配布している ajaxCalendar.js は横型カレンダー専用です。テーブルタイプのカレンダーで配布している ajaxCalendar.js はお使いになれません。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

<div title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65310;</a>
</MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div>

設定が終わったら「保存」をクリックしてください。

なお、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストで2ヶ所出現する

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/index.html">');">＜</a>

の赤色部分を変更します。
例えば「archives」というパスを付与している場合は、

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="archives/calendar/%Y/%m/index.html">');">＜</a>

とします。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。

バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類：月別
テンプレート：カレンダー（←２項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。

出力フォーマット（3.2-ja 以降）

calendar/%y/%m/%i

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

４．テンプレート修正

カレンダーを表示させたいテンプレートに下記の設定を行います。

４．１外部ファイルのインクルード

<head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．２カレンダー表示部分の設定

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）のバナータイトルの下に、下記のカレンダー表示用のタグ（青色部分）を追加してください。
リストは公開テンプレートの場合を例にしています。

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

また、２項と同様、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストの赤色部分を修正します。
例えば archives というアーカイブパスを設定している場合は、下記の青色のように修正てください。

getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");

５．CSS修正

下記をスタイルシートに追加します。すでにカレンダー関係のスタイル設定が行われている場合は競合を避けるため、古い設定を削除（またはコメントアウト）してください。

#calendar {
    text-align: center;
    padding: 5px 0;
    border-bottom : 1px solid #666699;
    font-family: Verdana, Arial, sans-serif; 
    font-size: 10px; 
    color:#444444; 
}
#calendar a,
#calendar a:link,
#calendar a:visited {
    color: #006699;
}
#calendar a:hover {
    text-decoration: underline;
}
#calendar a:active {
    color: #006699;
}
#calendar .calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
#calendar .today { 
    border : 1px solid #444444; 
    padding: 0 2px;
} 
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
    color: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
    color: #0000ff;
}
#calendar .tholiday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #e50003;
}
#calendar .tholiday a:link,
#calendar .tholiday a:visited {
    color: #e50003;
}
#calendar .tsaturday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #0000ff;
}
#calendar .tsaturday a:link,
#calendar .tsaturday a:visited {
    color: #0000ff;
}

６．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

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

に、例えば青色の

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

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

７．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

８．トラブルシューティング

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

カレンダーアーカイブの再構築ができていない
カレンダーアーカイブページへのパス設定が誤っている
ajaxCalendar.js の修正誤り
テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、そこに記述されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるカレンダーアーカイブへのパスが誤っている可能性があります。

９．その他

当サイトで運用している月送りカレンダーの Ajax ライブラリは、prototype.js ではなく、「入門 Ajax」のサポートページで紹介されている jslb_ajax.js を使っていますが、紹介するカスタマイズでは知名度の高い protptype.js を用いています。

2007.03.21 追記
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [27] | Trackbacks [5]

Ajax 月送りカレンダー

October 10,2006 12:10 AM
Tag：[Ajax, Calendar, Customize, MovableType]
Permalink

Ajax を利用した Movable Type 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。
MT4をご利用の方は「Ajax 月送りカレンダー（MT4版）」を参照してください。

このカレンダーは、従来の月送りカレンダー（iframe 利用）と比較して、下記のアドバンテージがあります。

週数の変化によって高さが可変、つまりカレンダー下に表示されるアイテムとの間隔が常に一定
月送りのリンクの履歴がブラウザの履歴に残らない

すでにお気づきの方もいらっしゃると思いますが、当サイトでは数ヶ月前から月送りカレンダーを Ajax 化して試験運用してiいます。月送りのリンクをクリックして Ajax 化されたカレンダーを体感してみてください。

注：本カスタマイズでつまづいた場合、「８．トラブルシューティング」をご覧ください。

仕様

ここで紹介する月送りカレンダーの主な仕様です。

Ajax を利用してテーブル型のカレンダーを月送りします。Ajax 化されるのはページ表示時および月送り時のカレンダー切り替え時です
クッキーを利用して月送り状態を保持します
カレンダーの取得に失敗した場合、カレンダー表示エリアにメッセージを表示します（表示内容・非表示のカスタマイズ可能）

以下、カスタマイズ方法です。ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしていますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

prototype.js（"Download the latest version" のリンクをクリック）
ajaxCalendar.js
dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記のいずれか

デフォルトテンプレートの場合

<div class="module-calendar module">
<h2 class="module-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></h2>
<div class="calendar">
<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>

公開テンプレートの場合

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<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>
</caption>
<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>

設定が終わったら「保存」をクリックしてください。

２．１ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。

バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類：月別
テンプレート：カレンダー（←２項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。

出力フォーマット（3.2-ja 以降）

calendar/%y/%m/%i

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

４．テンプレート修正

カレンダーを表示させたいテンプレートに下記の設定を行います。

４．１外部ファイルのインクルード

<head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．２カレンダー表示部分の設定

カレンダーを表示させたい位置に下記を追加します。

<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>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

５．CSS修正

下記をスタイルシートに追加します。すでにカレンダー関係のスタイル設定が行われている場合は競合を避けるため、古い設定を削除（またはコメントアウト）してください。

デフォルトテンプレートの場合

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

６．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

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

に、例えば青色の

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

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

７．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

８．トラブルシューティング

８．１一度も表示されない場合

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

カレンダーアーカイブの再構築ができていない
カレンダーアーカイブページへのパス設定が誤っている
テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
表示されたソースから下記のタグをみつけ、getCalendar() の3番目のパラメータに設定されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/", "1", "http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

８．２一度表示され、リロードすると表示されなくなる場合

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるアーカイブパスが誤っている可能性があります。よくあるのは次のように最後の"/"が抜けているケースです。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/archives", "1", "http://user-domain/archives/calendar/yyyy/mm/");
</script>

これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。

９．その他

当サイトで運用している月送りカレンダーの Ajax ライブラリは、prototype.js ではなく、「入門 Ajax」のサポートページで紹介されている jslb_ajax.js を使っていますが、紹介するカスタマイズでは知名度の高い protptype.js を用いています。

2006.12.26
タグの属性名が誤ってましたので修正しました。（sord_order → sort_order）

2007.03.20
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。
また、デフォルトテンプレート + IE6 で、カレンダー日付のスタイルが崩れる不具合を修正しました。

2007.10.20
アーカイブパスがサイトパス配下に存在しない場合に正常に動作しない不具合を修正しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [167] | Trackbacks [26]

月送りカレンダー（簡易版・横型・休日表示付き）

September 22,2006 1:39 AM
Tag：[Calendar, Customize, MovableType]
Permalink

月別アーカイブページに表示された横型カレンダーに月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー（簡易版・休日表示付き）」を横型用にアレンジしたものです。ご利用に際しては「月送りカレンダー（簡易版）」も併せてご覧ください。

注：本カスタマイズは日付アーカイブテンプレートのみが対象です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．テンプレートの修正２（カレンダー表示タグの設定）

日付アーカイブテンプレート編集画面を開き、横型カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

<div id="calendar" title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y" language="en"$><MTArchiveNext> <a href="<$MTArchiveLink$>">&#65310;</a></MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 
 
<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendar");
    var title = element.getAttribute("title");
    var year = title.split("/")[0];
    var month = title.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (!(spans[i].getAttribute('class') == 'calendarHead' ||
            spans[i].getAttribute('className') == 'calendarHead')) {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(isSaturday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            } else if (isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

参考までに、タイトルバナー下に上記リストを挿入する場合の設定位置を示します。

デフォルトテンプレートの場合

　　　　　　：
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>
 
---- ここに設定 -----
 
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
　　　　　　：

公開テンプレートの場合

　　　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
---- ここに設定 -----
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　：

５．CSS修正

下記のCSSを styles-site.css に追加してください。
ここでは公開テンプレートに設定する場合のスタイルを示しますが、デフォルトテンプレートでも適用可能です。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
.calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
.today { 
    display: inline;
    padding: 0 1px;
    border : 1px solid #444444; 
} 
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link,
.tsaturday a:visited {
    color: #0000ff;
}

デフォルトテンプレートの場合は赤色部分を削除するといい具合になります。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
　　　　　　：

公開テンプレートご利用の方は、styles-site.css に設定されている下記の設定を削除してください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}

Comments [2] | Trackbacks [1]

月送りカレンダー（簡易版・休日表示付き）

September 16,2006 12:10 AM
Tag：[Calendar, Customize, MovableType]
Permalink

月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー（簡易版）」に休日表示付きリアルタイムカレンダーを付与した改善版です。
またカスタマイズは日付アーカイブテンプレートのみが対象です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．テンプレートの修正２（カレンダー表示タグの設定）

カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

４．１項および４．２項のリストを追加した後、管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」の左側にチェックをつけて保存し、再構築してください。これを行わないとカレンダーが表示されませんのでご注意ください。

４．１デフォルトテンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<tr>
<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>
<!-- script -->
</MTIfArchiveTypeEnabled>

４．２公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext>
</caption>
<tr>
<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>
<!-- script -->
</MTIfArchiveTypeEnabled>

５．テンプレートの修正３（スクリプト追加）

休日表示カレンダースクリプトを起動するためのスクリプト

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendarTable");
    var summary = element.getAttribute("summary");
    var year = summary.split("/")[0];
    var month = summary.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (spans[i].parentNode.nodeName == "TD") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                spans[i].setAttribute('class', 'holiday');
                spans[i].setAttribute('className', 'holiday');
            } else if(isSaturday(year, month, day)) {
                spans[i].setAttribute('class', 'saturday');
               spans[i].setAttribute('className', 'saturday');
            }
            if (isToday(year, month, day)) {
                spans[i].parentNode.setAttribute('class', 'today');
                spans[i].parentNode.setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

を、４．１項または４．２項の赤色で示した

<!-- script -->

の部分に挿入してください（赤色の行は削除してください）。

６．CSS修正

下記のセレクタを styles-site.css に追加してください。

６．１デフォルトテンプレートの場合

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は today / sunday,holiday / saturday のみ追加してください。

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

６．２公開テンプレートの場合

下記のセレクタを追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

また現在設定されているCSSより、下記の color プロパティ（赤色）を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

Comments [12] | Trackbacks [0]

休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Type

March 27,2006 1:50 AM
Tag：[Calendar, Customize, MovableType]
Permalink

休日表示付リアルタイムカレンダーの月送り・横型タイプです。これまでにエントリーした横型カレンダーはすべてPHP化が必要でしたが、JavaScript で休日表示および本日表示を行うためPHP化は不要となります。完成するとスクリーンショットのような表示になります（画像をクリックすると全体が表示されます）。
以下設定方法です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．スクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。このスクリプトをインクルードするための script 要素は４項のテンプレートに含まれています。

３．アーカイブパスの設定

Movable Type のバージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定します。

アーカイブURL：http://ブログURL/archives/
アーカイブパス：アーカイブURLまでのパス

例えば当サイトであれば

アーカイブURL：http://www.koikikukan.com/archives/
アーカイブパス：/home/koikikukan/public_html/archives

という具合になります。

バージョンが 3.1x-ja 以前の場合は、管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

ローカル・アーカイブ・パス：アーカイブURLまでのパス
アーカイブのURL：http://ブログURL/archives/

を設定します。すでに設定済みの場合はそのままでも結構ですが、以降のカスタマイズで出現する「archives」というディレクトリ名を適宜変更または削除する必要があります。ここでは説明を割愛しますのでお分かりにならない場合はコメントにてご質問ください。

４．カレンダー用アーカイブテンプレートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0/ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /> 
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>
</head>
<body>

<div class="calendar"  title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.html">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.html" >&#65310;</a>
</MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var elements = document.getElementsByTagName("div");
    for (j = 0; j < elements.length; j++) {
        var element = elements[j].getAttribute("title");
        var year = element.split("/")[0];
        var month = element.split("/")[1];
        if(!(year == y && month == m)){
            continue;
        }
        var spans = elements[j].getElementsByTagName("span");
        var day;
        for (i = 0; i < spans.length; i++) {
            if (!(spans[i].getAttribute('class') == 'calendarHead' ||
                spans[i].getAttribute('className') == 'calendarHead')) {
                if(spans[i].innerHTML.indexOf("href") != -1){
                    day = spans[i].getElementsByTagName("a")[0].innerHTML;
                } else {
                    day = spans[i].innerHTML;
                }

                if (isHoliday(year, month, day)) {
                    if (isToday(year, month, day)) {
                        spans[i].setAttribute('class', 'tholiday');
                        spans[i].setAttribute('className', 'tholiday');
                    } else {
                        spans[i].setAttribute('class', 'holiday');
                        spans[i].setAttribute('className', 'holiday');
                    }
                } else if(isSaturday(year, month, day)) {
                    if (isToday(year, month, day)) {
                        spans[i].setAttribute('class', 'tsaturday');
                        spans[i].setAttribute('className', 'tsaturday');
                    } else {
                        spans[i].setAttribute('class', 'saturday');
                        spans[i].setAttribute('className', 'saturday');
                    }
                } else if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'today');
                    spans[i].setAttribute('className', 'today');
                }
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

</body>
</html>

設定が終わったら「保存」をクリックしてください。

５．カレンダー用スタイルシートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。次画面で下記を設定してください。

テンプレート名：カレンダー用スタイルシート（名称は何でもOKです）
出力ファイル名：calendar.css
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

body {
    font-family: Verdana, Arial, sans-serif; 
    font-size: 10px; 
    margin: 0;
    padding: 0;
    color:#444444; 
}
a,
a:link,
a:visited {
    color: #006699;
}
a:hover {
    text-decoration: underline;
}
a:active {
    color: #006699;
}
.calendar { 
    margin-top: 5px;
    margin-bottom: 7px;
    text-align: center; 
    padding-bottom: 1px;
} 
.calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
.today { 
    border : 1px solid #444444; 
} 
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link,
.tsaturday a:visited {
    color: #0000ff;
}

設定が終わったら「保存」をクリックし、次の画面で「このテンプレートを再構築する」をクリックしてください。

６．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください。バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類：月別

テンプレート：カレンダー（←４項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、４項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブ・ファイルのテンプレート（3.1x 以前）」または「出力フォーマット（3.2-ja 以降）」に下記を設定してください。

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）：下記

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

出力フォーマット（3.2-ja 以降）：下記

calendar/%y/%m/index.html

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

７．各テンプレートの修正

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）のタイトル設定の下に下記のカレンダー表示用の iframe 要素（青色部分）を追加してください。

<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTEntries lastn="1" sord_order="descend"><$MTEntryDate format="%Y/%m/index" $></MTEntries>.html" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

サイドバーに既存のカレンダーを表示している場合は併せて削除してください。コメントアウトをされても構いませんが、その場合でも再構築の対象になります（つまりその分再構築時間がかかります）ので、削除されることをお勧めします。

８．CSS設定

スタイルシート（styles-site.css）に、iframe セレクタに対するプロパティ（青色）を追加してください。

#globalnavi {
    text-align: center;
    padding-bottom: 3px;
    border-bottom : 1px solid #666699;
}

以上です。
ここまでの設定が終わったら、管理メニューの「サイトを再構築」→「すべてを再構築」を選択・再構築を実行して、カレンダーを設定したページを表示し、横型カレンダーがタイトル下に表示されること、月送りができることを確認してください。スタイルは Windows2000/XP：IE/Firefox/Opera で確認しています。

2006.03.30 追記
６項で設定する拡張子が誤ってましたので修正しました。

2006.06.14 追記
日別アーカイブのチェックについて追記しました。

Comments [96] | Trackbacks [14]

休日表示付リアルタイムカレンダー for Movable Type

March 16,2006 12:38 AM
Tag：[Calendar, Customize, MovableType]
Permalink

休日表示付リアルタイムカレンダー Movable Type のカレンダーに土・日・休日・本日を表示するカスタマイズです。ここではデフォルトテンプレートおよび公開テンプレートを利用したテーブルタイプのカレンダー、および公開テンプレートの月送りカレンダーに対するカスタマイズをご紹介します。CSSを変更すれば他のテンプレートでもご利用可能です。
スクリーンショットはデフォルトテンプレートに設定した完成例です。

余談ですが、これまで公開してきたカレンダーのHTMLマークアップおよびCSSの設定を若干見直しました。

2006.10.10 追記：本カスタマイズを Ajax 化した「Ajax 月送りカレンダー」を公開しています。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．スクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記の設定を追加します。月送りカレンダーの場合はカレンダーテンプレートの <head>～</head> の間に挿入してください。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

src 属性には配置したスクリプトのURLを設定してください。スクリプトは utf-8 で作成しておりますので、ブログの文字コードが異なる場合は、スクリプトの文字コードをエディタ等を用いてブログの文字コードに変更するか、

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js" charset="utf-8"></script>

と、青色で示した charset 属性に utf-8 を設定し、追加してください。

４．テンプレートの修正２（カレンダー表示タグの設定）

カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。
４．１項および４．２項のリストを追加する場合、管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」の左側にチェックをつけて保存し、再構築してください。これを行わないとカレンダーが表示されませんのでご注意ください。

４．１デフォルトテンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><$MTDate format="%B %Y"$></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%Y/%m"$>">
<tr>
<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>
<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>
 
<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTDate format="%Y"$>','<$MTDate format="%m"$>');
</script>
 
</MTIfArchiveTypeEnabled>

４．２公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%Y/%m"$>">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<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>
<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>
 
<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTDate format="%Y"$>','<$MTDate format="%m"$>');
</script>
 
</MTIfArchiveTypeEnabled>

４．３月送りカレンダーの場合

カレンダー用アーカイブテンプレートの最後に下記を追加してください。

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

2006.09.12 以前に月送りカレンダーのカスタマイズをされた方

カレンダー用テンプレートの table 要素に id 属性を追加してください。

<table id="calendarTable" ?>

2006.03.23 以前に月送りカレンダーのカスタマイズをされた方

カレンダー用テンプレートの table 要素の summary 属性を下記のように変更してください。

<table summary="<$MTArchiveDate format="%Y/%m"$>">

また、下記の赤色部分を削除してください。

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar">
<!--追加--><MTCalendarIfToday><b></MTCalendarIfToday><!---->
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><!--追加--><MTCalendarIfToday></b></MTCalendarIfToday><!----></span>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

2006.03.23 以降に月送りカレンダーのカスタマイズをされた方

下記の赤色部分を削除してください。

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></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>

５．テンプレートの修正３（スクリプト追加）

休日表示カレンダースクリプトを起動するスクリプトを <head>～</head> の間に下記の設定を追加するか、外部ファイル（この場合、dayChecker.js に追加するのが良いでしょう）として保存します。外部ファイルにする場合はリストの最初と最後にある script 要素を削除してください。
月送りカレンダーの場合はカレンダーテンプレートの </body> の直前に挿入してください。

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendarTable");
    var summary = element.getAttribute("summary");
    var year = summary.split("/")[0];
    var month = summary.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (spans[i].parentNode.nodeName == "TD") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                spans[i].setAttribute('class', 'holiday');
                spans[i].setAttribute('className', 'holiday');
            } else if(isSaturday(year, month, day)) {
                spans[i].setAttribute('class', 'saturday');
               spans[i].setAttribute('className', 'saturday');
            }
            if (isToday(year, month, day)) {
                spans[i].parentNode.setAttribute('class', 'today');
                spans[i].parentNode.setAttribute('className', 'today');
            }
        }
    }
}
</script>

６．CSS修正

下記のセレクタを styles-site.css に追加してください。

６．１デフォルトテンプレートの場合

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は today / sunday,holiday / saturday のみ追加してください。

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

６．２公開テンプレートの場合

下記のセレクタ（青色）を追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

また下記の color プロパティ（赤色）を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

６．３月送りカレンダーの場合

カレンダー用スタイルシートに下記を追加してください。

.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

７．PHP化によるリアルタイムカレンダーから変更される場合

上記のカレンダーに置き換えてください。拡張子は .php のままで問題ありません。

2006.03.19 追記
月送りカレンダー（４．３項）のタグが誤ってましたので修正しました。

2006.03.23 追記
月送りカレンダーの説明が不足していましたので追記しました。

2006.03.24 追記
４．３の最初のリストが誤っていました（MTData→MTArchiveDate）ので修正しました。

2006.03.30 追記
土日祝日にリンクがある場合の考慮がもれてましたので、CSSを修正しました。

2006.04.07 追記
４項に日別アーカイブのアーカイブマッピングを追加する記述を追加しました。
また５．２項に追加すべきスタイルを追加しました（途中でセレクタ名を変更したことによる修正もれ）。

2006.09.12 追記
カレンダーのセレクタ名を一部修正しました。

Comments [123] | Trackbacks [22]

月送りカレンダー（簡易版）

December 6,2005 11:58 PM
Tag：[Calendar, Customize, MovableType]
Permalink

月送りカレンダー（簡易版）月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。

通常の1ヶ月カレンダーは月送りができないため、過去に作った日別アーカイブへのリンクがなくなってしまうという欠点があり、月送りカレンダーが急速に普及したという経緯があります。ですが、月送りカレンダーは専用のアーカイブテンプレートを作ったり、表示のために iframe 要素を使用したりと、やや複雑なカスタマイズになるというのが難点でした。

このカスタマイズではそのような手間はいらず、下にあるリストを貼り付ければ通常のカレンダーが月送りカレンダーに早代わりします。また Serena Bach（sb）のように、前月または次月のリンクをクリックするとページ全体も切り替わるのが利点です。

ただし月送りになるのは月別アーカイブページのみです（利用可能なアーカイブが限定されているので「簡易版」と命名しました）。メインページやカテゴリー・アーカイブ、エントリー・アーカイブは1ヶ月表示のままです。
簡易版といっても、カレンダーの切り替えが必要なのは基本的に月別アーカイブなので、個人的にはお勧めのカスタマイズです。

ひとつだけ注意事項がありまして、日付アーカイブテンプレートは他の日別アーカイブページ・週別アーカイブページと兼用になっていますが、このカスタマイズを行うと、これらのアーカイブのカレンダーにも同様のリンクが設定されることになります。ただし日別アーカイブではこのリンクが昨日（または明日）、週別アーカイブでは先週（または次週）のリンクになり、見栄えとしてはやや妙なものになります。

このため、カスタマイズ前の日別アーカイブテンプレートを丸ごとコピーした、新しい日付アーカイブテンプレートを作り、日別アーカイブ（または週別アーカイブ）はこのテンプレートと関連づけることをお勧めします（やっぱり面倒！というツッコミはなしで）。
新しくアーカイブテンプレートを作る方法は、このエントリーでは割愛しますので、アーカイブテンプレート作成方法を参照ください。

以下、カスタマイズ方法です。

１．テンプレートを修正する

管理画面から「テンプレート」→「アーカイブ」をクリックして「日付アーカイブ」を選択します。カレンダーを表示したい位置に下記のリストを挿入します。デフォルトテンプレートは1カラムのため、ここでは公開テンプレートを例にしています。本日の日付を表示するリアルタイムカレンダーも組み込んでます。
デフォルトテンプレートの場合は、事前に2カラムまたは3カラムへの変更を行ってください。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse> / </MTElse></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

設定したら保存・再構築してください。

２．通常カレンダーとの相違点

JavaScript を除いて、1ヶ月表示のカレンダーとの違いは、下記で示す部分です。削除または変更前を赤色で、追加または変更後を青色で示しています。

具体的には、2ヶ所ある MTDate タグを MTCalendarDate に変更し、MTCalendar に month 属性で this（今月）を付与します。あとは前月と次月のリンクを追加しています。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTDate$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
　　　　　　　　　　　　　　　　：

３．日別アーカイブのカレンダーについて

冒頭で説明した通り、日別アーカイブはカスタマイズ前の日付アーカイブテンプレートを利用されていることが前提ですが、日別アーカイブも同じカレンダーを利用し、不要な前月および次月のリンク（<MTArchivePrevious>～</MTArchivePrevious> と <MTArchiveNext>～<MTArchiveNext>）を削除することで、ページに表示されている日と同じ月が表示されるようになります。

Comments [23] | Trackbacks [3]

カレンダーのリンクにツールチップを設定する

December 4,2005 11:50 PM
Tag：[Calendar, Customize, MovableType]
Permalink

カレンダーのリンクにマウスをポイントすると、その日にエントリーした記事の全タイトルをツールチップ（説明）としてポップアップするカスタマイズです。最近失敗が多いので、IE/Firefox/Opera でリアルタイムカレンダー（JavaScript版）で動作の正常性を確認しています。スクリーンショットは IE6.0 でデフォルトテンプレートを使った場合の表示例です（ツールチップの表示はブラウザによって異なります）。

カレンダーを表示するタグの赤色部分を青色のものに書き換えてください（カレンダー全体のタグは省略しています）。

　　　　　　：
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
<MTEntries><MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle encode_html="1"$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse>&nbsp;/&nbsp;</MTElse></MTDateFooter></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
　　　　　　：

上記のリストでは、記事を新着順に表示する設定になっています。順番を入れ替える場合は、

<MTEntries>

の部分を

<MTEntries sort_order="ascend">

に変更してください。

またタイトルとタイトルの区切り文字には "/" にしていますが、他の文字に変更する場合は

<MTElse>&nbsp;/&nbsp;</MTElse>

の赤色部分を任意の文字に書き換えてください。区切り文字の左右は文字実体参照   を使って空白を挿入していますので、不要であれば削除してください。

2007.03.06 追記
MTEntryTitle タグに encode_html 属性を追加しました。

Comments [10] | Trackbacks [7]

リアルタイムカレンダー再修正のお知らせ

December 3,2005 11:51 PM
Tag：[Information]
Permalink

先日エントリーしたリアルタイムカレンダー（JavaScript版）ですが、スクリプトに誤りがあり、枠の装飾がきちんとできていないことが再度発覚致しました。この場をお借りしてお詫び申し上げます。
リストは修正し、日付にリンクのある場合とない場合の動作を IE/Firefox/Opera で確認致しました。2005/12/04 00:10 以前にリストを取得された方はお手数ですが、２項の作業を再度行ってくださいますよう、よろしくお願い致します。

なお <MTCalendar> ? </MTCalendar> の間の改行は変更されないよう、そのままお使いください。改行を変更されると Mozzila系ブラウザで装飾が行われなくなる可能性があります。

Comments [6] | Trackbacks [1]

リアルタイムカレンダー修正のお知らせ

November 30,2005 11:55 PM
Tag：[Information]
Permalink

昨日エントリーしたリアルタイムカレンダー（JavaScript版）ですが、本日の日付がハイパーリンクになっている場合、枠表示の装飾ができないという情けない不具合がありました。この場をお借りしてお詫び申し上げます。
リストは修正致しましたので、2005/11/30 23:50 以前にリストを取得された方はお手数ですが、２項の作業を再度行ってくださいますよう、よろしくお願い致します。

なお <MTCalendar> ? </MTCalendar> の間の改行は変更されないよう、そのままお使いください。改行を変更されると Mozzila系ブラウザで装飾が行われなくなる可能性があります。

Comments [0] | Trackbacks [0]

リアルタイムカレンダー（JavaScript版）

November 29,2005 11:57 PM
Tag：[Calendar, Customize, MovableType]
Permalink

公開中のリアルタイムカレンダーの JavaScript 版です。

リアルタイムカレンダーとその経緯について改めて説明しますと、まず Movable Type のカレンダー（*1）には「本日」を判断するためのMTタグ MTCalendarIfToday があります。このタグを利用することで、本日の日付に枠をつけたり色を変更するといった装飾を行うことができます。
ところがこのタグの弱点は、エントリーの投稿やコメント等でページの再構築が発生しないとカレンダーの日付が更新されないということです。例えばエントリーを投稿せず、コメントもない状態が数日間続くと、カレンダーの本日表示は全く更新されません。

そんな中、PHPを利用したリアルタイムカレンダー（と勝手に命名しました）が kamishiro.net さんの記事（*2）で公開されており、当サイトでも若干アレンジして紹介させて頂きました。PHPを利用することにより、ブラウザを開いたり更新するだけで本日の日付が更新されるようになります。

ただしPHP化のカスタマイズ作業でつまづく方が少なくないのも事実で、これに月送り等の機能を組み合わせると結構複雑な作業になってしまうのが難点でした。またファイル名を変更することでデッドリンクになる可能性もあり、それを回避するため、さらに .htaccess というファイルでリダイレクト制御をしたりするとかなり面倒です。

しばらく「カレンダー = PHP」という先入観にとらわれてしまい、カレンダー関係のカスタマイズ記事ではPHP化を併用しておりましたが、よく考えてみると現在の日付は JavaScript でも取得できます。
ということで、JavaScript 版のリアルタイムカレンダーを作りました。まずは1ヶ月表示用を公開します。巷では Kinarie&May さんの flashカレンダーがすっかり有名になりましたが、月送り版等も追々公開する予定です。

また 3.2-ja 以降、ついにカレンダーがデフォルトテンプレートから姿を消し、カレンダーの作り方や存在自体もご存知ない方が増えてくるのも何なので、公開テンプレート用と併せてデフォルトテンプレートでも使えるデザインを用意しました。スクリーンショットはデフォルトテンプレートのサイドメニューへの設定例です。

前置きが長くなりましたが以下、カレンダーの設定方法です。

１．日別アーカイブの有効化

カレンダーは日別アーカイブを有効にしないと表示されないようにしています。カレンダーの日付からのリンクに日別アーカイブを設定しているためです（*3）。
管理画面の「設定」→「公開」→「アーカイブ・マッピング」で「アーカイブ種類」の「日付」のチェックボックスをチェックして、一番下の「変更を保存」をクリックします。

２．テンプレートの設定

管理画面の「テンプレート」から、カレンダーを表示したいテンプレート（メインページ／カテゴリー・アーカイブ／月別アーカイブ／エントリー・アーカイブ等）の編集画面を開きます。そして下記のリストを丸ごとコピーし、表示したい位置にペーストします。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><$MTDate format="%B %Y"$></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%B %Y"$>">
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></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>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
if (month < 10) {
    month = '0' + month;
}
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

公開テンプレートの場合は、上記リストの3-6行目（赤色部分）を

<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%B %Y"$>">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>

に変更してください。

デフォルトテンプレートで挿入位置が分からない方は、下記の位置に挿入すればページ右上に表示されます。

<div id="beta-inner" class="pkg">
 
　　　　　　ここにリストを挿入
 
  <div class="module-search module">

３．スタイルシートの設定（デフォルトテンプレートの場合のみ）

管理画面の「テンプレート」から「スタイルシート」を選択し、下記のリストをコピー＆ペーストしてください。公開テンプレートでは設定済なのでこの項はスキップしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    margin: 5px 0;
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.red {
    color: #e50003;
}
.blue {
    color: blue;
}

設定が全て完了したら再構築して動作を確認してみてください。Windows自宅サーバで運用されている方は、「日付と時刻」の変更に連動して本日の日付表示が変化することを確認できます。

以上です。
日付取得のコードは下記のサイトを参考にさせて頂きました。ありがとうございました。

イヌでもわかるJavaScript講座：日付や時間を取得／表示します

*1：3.2-ja 以降はデフォルトテンプレートから外されました。
*2：元記事は 404 File Not Found です。
*3：リンク先にエントリー・アーカイブを設定すればこの項は不要です。その代わり上記リストから

<MTIfArchiveTypeEnabled archive_type="Daily">

と

</MTIfArchiveTypeEnabled>

の2行を削除し、リスト内にある archive_type="Daily" を archive_type="Monthly" に変更します。

2005.11.30 追記
本日の日付がリンクになっている場合、日付を装飾できないという不具合がありましたので修正しました。

2005.12.04 追記
本日の日付がリンクでない場合、日付を装飾できないという不具合がありましたので修正しました。

2006.03.27 追記
当月が1?9月の場合の考慮がもれてましたのでスクリプトを修正しました。

Comments [11] | Trackbacks [0]

月送り版リアルタイムカレンダーご利用の方へ修正依頼

August 8,2005 11:56 PM
Tag：[Apache, Bug, Calendar, Customize, MovableType, PHP]
Permalink

PHPを利用したリアルタイムカレンダーにスクリプトミスがありました。修正内容と併せてこの場をお借りしてお詫び申し上げます。

事象としては、ブラウザからアクセスする時のカレンダー表示は正常なのですが、アクセスすると同時にWebサーバ（例えば Apache）の error.log に下記のようなメッセージを出力しています。

PHP Notice:  Use of undefined constant j - assumed 'j' in …
PHP Notice:  Use of undefined constant Y - assumed 'Y' in … 
PHP Notice:  Use of undefined constant m - assumed 'm' in …

メッセージが出力される原因は、カレンダーの本日の年月日を取得する処理で

<?php $day = date(j); $year = date(Y); $month = date(m); ?>

と書いている部分で、date 関数の format パラメータ文字列（ここでは j / Y / m）を「"」で括っていなかったためです。PHPではフォーマット文字列として認識される文字については「"」で括らなくてもきちんと動作する仕様みたいですが、その代わりに「『"』で括らないのは非推奨」というメッセージを表示するようです。
このメッセージはカレンダーへのアクセス、つまりページビューが発生する毎に出力されます。

ということで、大変申し訳ございませんが月送り版リアルタイムカレンダー（通常型・横型とも）をご利用の方は、カレンダー部分のタグを次のように

<?php $day = date("j"); $year = date("Y"); $month = date("m"); ?>

と、赤色部分の「"」を追加くださいますよう、よろしくお願い申し上げます。該当の記事につきましては修正済です。

なお、レンタルサーバではPHPの環境設定によってメッセージの出力が抑止されているかもしれません。

Comments [2] | Trackbacks [1]

月送りカレンダーにリアルタイムカレンダーを適用する場合の補足

July 31,2005 9:20 PM
Tag：[Calendar, Customize, MovableType]
Permalink

月送りカレンダーにリアルタイムカレンダーを適用する場合の修正手順です。月送りカレンダーを使われている方がリアルタイムカレンダーを導入した時に「うまく表示されない」という質問を以前から時々受けておりましたので、改めてまとめてみました。

ポイントは次の2点です。

「アーカイブ・ファイルのテンプレート」修正
拡張子が .html になっている月送りカレンダー用ファイルの拡張子を .php に変更します。
テンプレートの修正
月送りカレンダー用ファイルを呼び出している各テンプレートの、iframe タグに記述されている月送りカレンダー用ファイル名を変更します。

なおリアルタイムカレンダーに変更する手順は本来のエントリーをご覧ください（この記事は前準備のみ記しています）。

１．「アーカイブ・ファイルのテンプレート」修正
月送りカレンダーの２項にある「ファイルの関連付け（管理ページの「ウェブログの設定」→「アーカイブの設定」）」では、「アーカイブ・ファイルのテンプレート」を

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

と設定していますが、ご覧の通り拡張子が .html で出力するようになっています。これを

<$MTArchiveDate format="calendar/%Y/%m/index.php"$>

に変更します。変更が終わったら保存・再構築してください。

２．テンプレートの修正
月送りカレンダーの３項にある「カレンダーの設置」では、 iframe タグの内容は下記のようになっていると思います。

<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

これが各テンプレート（メインページ／カテゴリーアーカイブ／月別アーカイブ／個別エントリーアーカイブ等）から実際にカレンダーを呼び出して表示する部分ですが、呼び出すファイルの拡張子が .html となっているため（赤色部分）、この状態では xxxxx.html というファイルしか呼び出せません。
ということで .html を .php に修正します（青色部分）。

<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

Comments [0] | Trackbacks [2]

月送りカレンダー・1日に表示されなくなる不具合を改善

June 5,2005 9:31 PM
Tag：[Bug, Calendar, Customize, MovableType, PHP]
Permalink

月送りカレンダーには、毎月1日にエントリーが投稿されてない状態でコメントまたはトラックバックを受信すると、カレンダーが表示されない（「404 Not Found」が表示）という既知の不具合があります。このようになる原因は次の通りです。

例えばメインページは、コメントまたはトラックバックの受信を契機に全ての情報が再構築されます。その際、メインページに埋め込まれている月送りカレンダー表示用の iframe タグ

<iframe name="cal-iframe" src="<$MTBlogURL$>archives/calendar/<$MTDate format="%Y/%m/index" $>.php" ...（中略）... marginheight="0"></iframe>

にある MTDate（赤色）も更新され、新しい月が設定されることになります。ただしパスが示す先には新しい月のカレンダーが生成されていないため、結果的に「404 Not Found」となります。

新しい月のカレンダーはエントリー投稿によって生成されますので、この不具合を避けるためには、1日になると同時にエントリーするか、事前に次月の日付でテストエントリーを投稿し、即削除します（生成されたカレンダーは削除されません）。
で、月初めにこのエラーが出る度に「来月こそ早めにテストエントリーを」と固く誓うのですが、日が経つと忘れてしまい、同じ失敗の繰り返しです。そもそも力任せな解消方法なのが不本意です。

ということで解消方法です。以前はPHPによる対処を掲載していましたが、The blog of H.Fujimoto さんに MTタグによる解消方法を教えて頂きましたので（コメント No.22）、それをそのまま使わせて頂きます。

１．テンプレート修正

iframe タグの src 属性を下記のように変更します。これで常に最新エントリーの最終月を取得することができますので、1日にカレンダーが表示されなくなる不具合が解消します。

<iframe name="cal-iframe" src="<$MTBlogURL$>archives/calendar/<MTEntries lastn="1" sord_order="descend"><$MTEntryDate format="%Y/%m/index" $></MTEntries>.php" ...（中略）... marginheight="0"></iframe>

Comments [35] | Trackbacks [15]

月送りカレンダー（横型・リアルタイム版）可変3カラム用

March 28,2005 11:58 PM
Tag：[Calendar, Customize, MovableType]
Permalink

最近投エントリーした「月送りカレンダー（横型・リアルタイム版）」は固定カラムしか考慮しておりませんでした（というのは喜怒哀楽さんより頂いたコメントで判明）。可変3カラムの場合は左右カラムの上部開始位置が絶対値指定のため、これも制御する必要があります。
ということで可変3カラムにも対応できるように修正しました（この方法が妥当かどうかは別として）。詳細は下記のエントリーを参照ください。

月送りカレンダー（横型・リアルタイム版）

併せて util.js もバージョンアップしました。

Comments [8] | Trackbacks [3]

月送りカレンダー（横型・リアルタイム版）

March 16,2005 11:33 PM
Tag：[Calendar, Customize, MovableType, PHP]
Permalink

月送りカレンダーの横型・リアルタイム版です（画像は完成イメージ）。これまでにエントリーしたタイプと設定内容が若干異なるのため別エントリーにしました。
PHPが利用できることが前提です。スタイルは公開テンプレート（2カラム）のデザインに合わせています。3カラム版等、他のテンプレートをお使いの方はテンプレート・スタイルシートのサイズに関する設定を適宜変更してください。なお今回のデザインは体験手記レポート部さんのサイトを参考にさせて頂きました。ありがとうございました。
以下設定方法です。

注：本エントリーではPHP化が必要なため、現在は JavaScript によるカスタマイズを推奨しています。詳細は下記のエントリーまたはカレンダーアーカイブをご覧ください。

休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Type

０．カレンダー用ディレクトリ設定

Movable Type のバージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定します。

アーカイブURL：http://ブログURL/archives/

アーカイブパス：アーカイブURLまでのパス

例えば当サイトであれば

アーカイブURL：http://www.koikikukan.com/archives/

アーカイブパス：/home/koikikukan/public_html/archives

という具合になります。

バージョンが 3.1x-ja 以前の場合は、管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

ローカル・アーカイブ・パス：アーカイブURLまでのパス

アーカイブのURL：http://ブログURL/archives/

を設定します。

１．カレンダー用アーカイブテンプレートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。次画面で下記を設定してください。

テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /> 

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>
<body >

<div class="calendar">

<span class="calendarHead">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php" >＞</a>
</MTArchiveNext>／
</span>

<?php $day = date(j); $year = date(Y); $month = date(m); ?>
<MTCalendar month="this"><MTCalendarIfEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?><span class="<?php print "$style"; ?>"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?><span class="<?php print "$style"; ?>"><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank></MTCalendar>
</div> 

</body>
</html>

設定が終わったら「保存」をクリックしてください。

２．カレンダー用スタイルシートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。次画面で下記を設定してください。

テンプレート名：カレンダー用スタイルシート（名称は何でもOKです）
出力ファイル名：calendar.css
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記

a,
a:link,
a:visited,
a:active {
    color: #8FABBE;
    background: none;
}

a:hover {
    color: #006699;
    background: underline;
}

.calendar { 
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center; 
} 

.calendarHead { 
    color:#666666; 
    font-size: 11px; 
    font-weight: normal; 
    font-family: Verdana, Arial, sans-serif; 
    padding-right: 5px;
} 

.notoday { 
    margin-right:4px;
    color:#666666; 
    font-size: 11px; 
    font-family: Verdana, Arial, sans-serif; 
} 

.today { 
    margin-right:4px;
    color:#666666; 
    font-size: 11px; 
    font-family: Verdana, Arial, sans-serif; 
    border : 1px solid #999999; 
}

設定が終わったら「保存」をクリックし、次の画面で「このテンプレートを再構築する」をクリックしてください。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください。バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類：月別

テンプレート：カレンダー（←１項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、１項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブ・ファイルのテンプレート（3.1x 以前）」または「出力フォーマット（3.2-ja 以降）」に下記を設定してください。

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）：下記

<$MTArchiveDate format="calendar/%Y/%m/index.php"$>

出力フォーマット（3.2-ja 以降）：下記

calendar/%y/%m/index.php

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

４．各テンプレートの修正

カレンダーを利用するテンプレート（メインページ・カテゴリーアーカイブ・日別アーカイブ・個別エントリーアーカイブ等）のタイトル設定の下に下記のタグ（青色部分）を追加してください。テンプレートの拡張子は .html のままで問題ありません。

<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

またサイドバーに設定されているカレンダータグ（赤字部分）を削除してください。コメントアウトをされても構いませんが、その場合でも再構築の対象になります（つまりその分再構築時間がかかります）ので、削除されることをお勧めします。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
　　　　　　：
　　　　（省略）
　　　　　　：
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

５．スタイルシート設定

スタイルシート（styles-site.css）に、カレンダー外側のスタイルを示す設定（青色部分）を追加してください。リストは .description の下に追加した例です。

/* サイト説明文 */
.description {
    color: #999999;
    font-size: 12px;
}
 
#globalnavi {
    text-align: center;
    padding-bottom: 5px;
    border-bottom : 1px solid #666699;
}

ここまでの設定が終わったらすべてを再構築して、カレンダーがタイトル下に表示されることを確認してください。

ここまでの設定で一応表示されるようになりますが、Mozilla系ブラウザでは iframe のサイズ認識がIE系ブラウザより若干狭くなるため、カレンダーの表示が欠けてしまいます。HTMLタグまたはスタイルシートの設定で回避できれば良いのですが、現状はその方法が不明ですので、JavaScriptを使用して回避することにします。その方法を６?８項で説明します。なお、iframe の幅（４項の height 属性）をやや大きい値で設定しておけばこの設定は不要です。

６．util.jsのダウンロード

下記の download をクリックして「スクリプトのページ」にジャンプし、一番下にある util.js のリンクをクリックして、ローカル・サイト・パスにアップロードしてください。なお今回のカスタマイズには ~~1.01~~1.02 以上が必要ですのでご注意ください。

download

７．スクリプト設定

JavaScriptを起動することによってブラウザによる表示の違いを吸収します。固定3カラムの場合は７．１のみ、可変3カラムの場合は７．１と７．２を実施してください。

７．１ iframe幅を調整するスクリプトを追加

iframeタグの幅を調整します。４項で設定したMTタグのすぐ下に下記の設定（青字部分）を追加してください。

<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="19" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
 
<script type="text/javascript">
<!--
setAttributeByTagNameAndAttribute(1, 'iframe', 0, 'height', '27');
-->
</script>

setAttributeByTagNameAndAttribute 関数は指定したタグの属性値を変更するためのものです。タグ名で指定するため、複数のタグが取得されるケースを考慮して何番目のタグかを指定できます。
赤字に示したパラメータでタグ等を指定します。左から、

ブラウザ種別（0：IE系／1：Mozzila系）
タグ名（iframe タグ）
タグの出現順（ページの中で最初に出現する場合は"0"）
属性名（height 属性）
属性値（27）

です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。他の ifame タグ（広告等）が今回設定したタグの位置より前に出現する場合は、例で設定している "0" を "出現順 - 1" に変更してください。例えばカレンダーの iframe タグが2番目に出現するのであれば設定値は "1" になります。

７．２ top からの表示開始位置を調整するスクリプトを追加

可変3カラムの左右サイドバーの開始位置（縦方向）は絶対値指定です。つまりブラウザによってカレンダーの表示幅が変化することで左右カラムの開始位置がずれたように見えてしまうため、このずれを調整します。
左カラム終了および右カラム終了タグの後ろにそれぞれ下記の設定（青字部分）を追加してください。

　　　　：
</div>
<!-- 左サイドバー終了 -->
 
<script type="text/javascript">
<!--
setStyleById(1, 'links-left', 'top', '125px');
-->
</script>
　　　　：
　　　　：
</div>
<!-- 右サイドバー終了 -->
 
<script type="text/javascript">
<!--
setStyleById(1, 'links-right', 'top', '125px');
-->
</script>
　　　　：

setStyleById 関数は指定した id 属性のスタイルを変更するためのものです。赤字に示したパラメータでスタイルおよび値を指定します。左から、

ブラウザ種別
id 属性名（links-left/links-right タグ）
スタイル（top）
値（125px）

です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。

８．JavaScriptのインクルード

４項で修正したテンプレートの <head>～</head> の間に下記を追加してください。

<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>

９．注意事項

毎月1日、カレンダーが存在しない状態でブラウザの更新を行ったりコメント投稿があると正常に表示されなくなります（File Not Found になります）のでご注意ください。なおカレンダーを生成するにはエントリーの投稿が必要です（一旦公開投稿すればエントリーを後で削除してもカレンダーは残ります）。この不具合を解消する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照してください。

2005.03.20 追記
カレンダーテンプレートの </span> の制御に修正もれがありましたので修正しました。Luna's*PaPaさん、ご指摘ありがとうございました。

2005.03.28 追記
可変3カラム使用時の説明を追加しました。またスタイルシートの #globalnavi に text-align: center; を追加しました。

2005.04.03 追記
月跨り時の動作について注意事項を追記しました。

2005.06.05 追記
月跨り時の不具合を改善する記事へのリンクを追記しました。

2005.06.23 追記
記事の内容についての不備等を見直しました。

2005.06.27 追記
日付の枠が右寄りになる不具合を修正しました。

2005.08.23 追記
calendar.css について再構築を行うことを追記しました。

2005.10.31 追記
3.2-ja 用の記述を追加しました。

Comments [97] | Trackbacks [34]

リアルタイムカレンダー（横型）

March 11,2005 8:38 PM
Tag：[Calendar, Customize, Information, MovableType]
Permalink

突然ですがリアルタイムカレンダーに横型用を作りました。下記のエントリーに追加しましたのでご利用ください。

リアルタイムカレンダー（改）リアルタイムカレンダー（画像表示版）

なお table タグを使わないケースを想定して書いてます。動作は一応確認しておりますが不具合等ございましたらご連絡ください。

Comments [4] | Trackbacks [1]

リアルタイムカレンダー（画像表示版）

February 23,2005 8:10 PM
Tag：[Calendar, Customize, Image, MovableType, PHP]
Permalink

ご要望がありましたのでリアルタイムカレンダー（改）を改造して作ってみました。今回の改造に際しまして下記のサイトを参考にさせて頂きました。ありがとうございました。

ふれあい果樹園

本カレンダーの仕様は、本日の日付に画像だけを表示するというものです（日を表示しません）。日付の背景に画像を表示する場合はリアルタイムカレンダーのスタイルシートに

.today {
    background-image :url( "画像のURL");
    background-repeat: no-repeat;
}

というような設定を行えば動作します（多分）。赤字部分に表示したい画像のURLを設定してください。

ここでは通常カレンダー・月送りカレンダー・縦型カレンダー・横型カレンダーの4つのケースについて説明しています。また使用されるアーカイブの拡張子が .php になっていることが前提です。.php になっていない場合は下記のエントリーの３項から始めてください。

リアルタイムカレンダー（改）

また月送りカレンダーにつきましては本エントリーとは別にカスタマイズが必要ですのでご注意ください。

月送りカレンダー

通常カレンダー・月送りカレンダー・横型カレンダーについては、カレンダー設定がされている各テンプレートの <MTCalendar>～</MTCalendar> の部分を下記のスクリプトに変更します。縦型カレンダーは <table>～</table> で括られていることを前提に作っておりますので、該当部分を置き換えてください。また縦型カレンダーのスタイルシートは

全体：calendar

月表示：calendar-head

日表示：calendar-day

という指定になっています。スタイルシートの設定は適宜設定くださいますよう、お願い致します。
いずれも赤字部分に表示したい画像のURLを設定してください。
現状では、Windows2000・IE6.0/Firefox1.0/Opera7.23で動作の正常性を確認しています。

１．通常カレンダー

<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php
$d="<$MTCalendarDay$>";
?>
<td align="center">
<?php
if($day != $d) {
    print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day != $d) {
    print $d;
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
}
?>
</a>
</MTEntries>
<?php
if($day != $d) {
    print "</span>";
}
?>
</td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<td align="center">
<?php
if($day != <$MTCalendarDay$>) {
    print "<span class=\"calendar\"><$MTCalendarDay$></span>";
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" />";
} 
?>
</td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

２．月送りカレンダー

<?php
$day = date("j");
$year = date("Y");
$month = date("m");
$img = "画像のURL";
?>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
 
<MTCalendarIfEntries>
<?php
$y = "<$MTCalendarDate format='%Y'$>";
$m = "<$MTCalendarDate format='%m'$>";
$d = "<$MTCalendarDay$>";
?>
<td align="center">
<?php
if($year == $y && $month == $m && $day == $d) {
    print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top">
<?php
if($year == $y && $month == $m && $day == $d) {
    print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
} else {
    print $d;
}
?>
</a>
</MTEntries>
<?php
if($year == $y && $month == $m && $day == $d) {
    print "</span>";
}
?>
</td>
</MTCalendarIfEntries>
 
<MTCalendarIfNoEntries>
<td align="center">
<?php
$y = "<$MTCalendarDate format='%Y'$>";
$m = "<$MTCalendarDate format='%m'$>";
$d = "<$MTCalendarDay$>";
if($year == $y && $month == $m && $day == $d) {
    print "<img src=\"" . $img . "\" align=\"middle\" />";
} else {
    print "<span class=\"calendar\"><$MTCalendarDay$></span>";
} 
?>
</td></MTCalendarIfNoEntries>
 
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

３．縦型カレンダー

<table width="100%" class="calendar" cellpadding="2" cellspacing="4" summary="カレンダー">
<tr>
<td class="calendar-head"><$MTDate format="%B"$>月</td>
</tr>
<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarIfEntries>
<?php
$d="<$MTCalendarDay$>";
?>
<tr><td align="center">
<?php
if($day != $d) {
    print "<span class=\"calendar-day\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day != $d) {
    print $d;
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
}
?>
</a>
</MTEntries>
<?php
if($day != $d) {
    print "</span>";
}
?>
</td></tr>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<tr><td align="center">
<?php
if($day != <$MTCalendarDay$>) {
    print "<span class=\"calendar-day\"><$MTCalendarDay$></span>";
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" />";
} 
?>
</td></tr></MTCalendarIfNoEntries>
</MTCalendar>
</table>

４．横型カレンダー

<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar> 
<MTCalendarIfEntries> 
<?php
$d = "<$MTCalendarDay$>";
if($day != $d) {
    print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1"> 
<a href="<$MTEntryLink archive_type="Daily"$>"> 
<?php
if($day == $d) {
    print "<img src=\"$img\" border=\"0\" />";
} else {
    print " $d";
}
?>
</a>
</MTEntries> 
</MTCalendarIfEntries> 
<MTCalendarIfNoEntries>
<?php
$d = "<$MTCalendarDay$>";
if($day != $d) {
    print "<span class=\"calendar\"> $d";
} else {
    print "<img src=\"$img\" border=\"0\" />";
}
?>
</MTCalendarIfNoEntries> 
<?php if($day != $d) { print "</span>"; } ?> 
</MTCalendar>

設定終了後、それぞれ保存・再構築してください。

2005.02.26 追記
月送りカレンダーにtypoがありましたので修正しました。

2005.03.11 追記
横型カレンダーを追加しました。

2005.05.02 追記
月送りカレンダーに month="this" の設定がもれていましたので追記しました。

2005.08.07 追記
Apache のログにPHPエラーが出ていたためスクリプトを一部修正しました。

Comments [13] | Trackbacks [8]

リアルタイムカレンダー（改）

January 4,2005 6:10 PM
Tag：[Calendar, Customize, MovableType]
Permalink

Movable Type がサポートするカレンダーでは、エントリー投稿やコメント投稿が行われないとカレンダー（のリンク）は更新されません。したがって MTCalendarIfToday タグを利用して本日の日付を装飾するカスタマイズを行っている場合も、先の動作がない限りカレンダーの本日表示は更新されません。
本カスタマイズは仕様に依存せず、リアルタイムに日付を更新させます（ブラウザの更新等は必要です）。本日の日付がリアルタイムに更新されることを指して「リアルタイムカレンダー」と（勝手に）命名しました。なおカレンダー自体が存在しない月跨りについては機能の対象外ですので予めご了承ください。

注：本エントリーではPHP化が必要なため、現在は JavaScript によるカスタマイズを推奨しています。詳細は下記のエントリーまたはカレンダーアーカイブをご覧ください。

このカスタマイズを行う前提条件はPHPが利用可能なこと、つまりカレンダータグを利用するテンプレートのファイル名の拡張子が .php になっていることです（詳細は後述）。
オリジナルサイトは下記です。ありがとうございました。

kamishiro.net：phpを使って今日の日付部分を動的にハイライトする方法

また記事のURLは以前よりこのカスタマイズを利用されていた Magic White さんより教えて頂きました（自力で発見できず…）。併せてありがとうございました。

タイトルの「改」は下記を指しています。

文字自体のスタイル設定だったオリジナルからテーブルのカラムにスタイルを与えられるように変更
本日であることを日でしか判定していなかったので年月日判定を追加（月送りカレンダー用）

ここでは拡張子がすでに .php になっている場合とそうでない場合、および月送りカレンダー利用の場合の3つのケースについて説明しています。それぞれに必要な項目は下記の通りです。

拡張子が .php になっている場合：１、２．１（または２．３）

拡張子が .php になっていない場合：１、３、４

月送りカレンダーの場合：１、２．２

月送りカレンダーの場合の注意事項

本エントリーとは別に月送りカレンダーでのカスタマイズが必要です。
カレンダー用テンプレートのファイル名の拡張子は .php に変更してください。
月送りカレンダーを引き込むタグ（iframe）は .html ファイルを呼び出すようになってますので、下記のように .php ファイルを引き込むように変更してください。

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html.php" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

横型カレンダーご利用で拡張子が .php になっていない場合は、本エントリー３項のリストの下半分（空行から下の部分）を２．３項のリストに置き換える形で行ってください。
月送りカレンダー用ファイルの拡張子を「.html」から「.php」に変更した際、.html ファイルが残っているとカレンダーが正常に表示されない場合があります。 .html ファイルは必ず削除してください。

１．スタイルシートにカレンダー用スタイルの追加（共通）

スタイルシートのcalendar設定の下辺りに下記の青色部分を追加します。リストは公開テンプレートを例にしています。設定部分は2パターン掲載していますので不要な部分を削除して設定内容を適宜修正してください。

.calendar table {
    padding: 0px;
    border-collapse: collapse;
}
 
.today {
    background : #000000; /* 背景色をつける設定 */
    border : 1px solid #000000; /* 枠線をつける設定 */
}

注：月送りカレンダーの方は、上記の設定をカレンダー用スタイルシート（calendar.css）の一番下に追加してください。

２．カレンダー関連タグの変更（拡張子が .php になっている場合/月送りカレンダーの場合）

カレンダーの設定がされている各テンプレートの <MTCalendar>～</MTCalendar> の部分を下記のスクリプトに変更します。利用中のカレンダーによって2種類のテンプレートを用意していますので該当する方をお使いください。

２．１通常の1ヶ月表示の場合

<?php $day = date("j");?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></span></td></MTCalendarIfEntries>
<MTCalendarIfNoEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><$MTCalendarDay$></span></td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td>&nbsp;</td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

２．２月送りカレンダーの場合

月送りカレンダーご利用の方は「アーカイブ・テンプレート」の「カレンダー」に設定されている該当部分を下記に変更してください。

<?php $day = date("j"); $year = date("Y"); $month = date("m"); ?>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?>
<td align="center"<?php print "$style"; ?>><span class="calendar"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"   target="_top"><$MTCalendarDay$></a></MTEntries></span></td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?>
<td align="center"<?php print "$style"; ?>><span class="calendar"><$MTCalendarDay$></span></td>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank><td>&nbsp;</td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

ちなみに両者の違いですが、月送りカレンダー/複数月表示の場合は本日の判定に年月日を取得しています。1ヶ月表示の場合は日のみの判定なので若干軽いです。月送りカレンダーで1ヶ月用のタグを使うと毎月同じ日に印がつきますのでご注意ください。

２．３横型カレンダーの場合

このカレンダーは table タグを用いてないパターンです。１項のスタイルシートは .today があれば大丈夫です（table のスタイル設定は不要）が、若干スタイルの指定が必要かもしれませんので適宜行ってください。

<?php $day = date("j");?>
<MTCalendar> 
<MTCalendarIfEntries> 
<?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = "today"; } else { $style = "calendar"; } ?>
<span class="<?php print "$style"; ?>"> 
<MTEntries lastn="1"> 
<a href="<$MTEntryLink archive_type="Daily"$>"> <$MTCalendarDay$></a>
</MTEntries> 
</MTCalendarIfEntries> 
<MTCalendarIfNoEntries>
<?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = "today"; } else { $style = "calendar"; } ?>
<span class="<?php print "$style"; ?>"> 
<$MTCalendarDay$>
</MTCalendarIfNoEntries> 
<MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>

３．カレンダー用インデックステンプレートの作成（拡張子が .php になっていない場合）

「管理メニュー」の「テンプレート」をクリック→次ページ右上の「新しいインデックス・テンプレートを作る」をクリック（3.2-ja 以降の場合は左上の「インデックス」→右上の「テンプレートを新規作成」をクリック）し、下記を設定してください。

テンプレート名：カレンダー（何でも良い）

出力ファイル名：calendar.php

インデックス?自動的に再構築する：チェック

テンプレートの内容：下記リストをコピー＆ペースト（公開テンプレート用に合わせてますのでそれ以外の方はクラス名等を適宜修正してください）

<div class="side">
<div class="calendar">
<div class="sidetitle">
Calendar of <$MTDate format="%B %Y"$>
</div>
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>
 
<?php $day = date("j");?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></span></td></MTCalendarIfEntries>
<MTCalendarIfNoEntries><?php $d="<$MTCalendarDay$>"; if($day == $d) { $style = " class=\"today\""; } else { $style = ""; } ?><td align="center"<?php print "$style"; ?>><span class="calendar"><$MTCalendarDay$></span></td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td>&nbsp;</td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</div>

設定終了後、保存・再構築してください。

４．calendar.phpのインクルード（拡張子が .php になっていない場合）

各テンプレートのカレンダー設定部分（赤色）をごっそり削除して青色のタグに置き換えてください。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>
 
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>><span class="calendar">
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

<$MTInclude file="calendar.php"$>

設定終了後、保存・再構築してください。

2005.01.05 追記
月送りカレンダー用のタグにtypoがありましたので修正しました。また同タグのリンクにターゲット指定を追加しました。

2005.02.02 追記
月送りカレンダーのエントリーへのリンクおよび説明を本文に追加しました。

2005.03.11 追記
横型カレンダーの説明を本文に追加しました。

2005.03.21 追記
横型カレンダーの </span> の制御が誤っていましたので修正しました。

2005.07.31 追記
月送りカレンダーの場合、 iframe タグを修正する説明が不足していましたので追記しました。

2005.08.07 追記
Apache のログにPHPエラーが出ていたためスクリプトを一部修正しました。

2005.10.31 追記
3.2-ja 用の記述を追加しました。

Comments [71] | Trackbacks [32]

6週目のカレンダー枠が表示されない不具合修正

November 1,2004 12:03 AM
Tag：[]
Permalink

左上の月送りカレンダーで6週目が本日になる場合、枠線の下の線が表示されていませんでした。設定ミスです。すいません。
（既に修正されていると思いますが）同様の設定をされている方はメインページやカテゴリーアーカイブ等の各テンプレートのカレンダー表示の高さ設定を、下記の赤色から青色に変更後、再構築することで正常に表示されるようになります。表示されない場合はピクセル数を少しずつ増やして再構築してみてください。

修正前
<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="160" height="112" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0"></iframe> 
</div>

修正後
<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="160" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0"></iframe> 
</div>

Comments [5] | Trackbacks [0]

月送りカレンダー状態保持スクリプト

October 7,2004 8:00 PM
Tag：[]
Permalink

左上のカレンダーを月送りに変更しまして、ジャンプ先の日別アーカイブページにも月送りカレンダーを配置しているのですが、クリックするとジャンプ先のカレンダーが今月に戻ってしまうので、いつものようにcookieを利用した状態保持機能を追加しました。
この機能を利用することで、他のページにジャンプしてもカレンダーは常に同じ月を表示します。cookieの生存期間はセッション単位ですのでブラウザを新たに起動した場合は今月が表示されます。
下記の月送りカレンダーを使われていることが前提です。またあまりスッキリしたカスタマイズではございませんが予めご容赦ください。

月送りカレンダー
diving to ...：月間移動可能なMovableTypeのカレンダー（元記事）

以下カスタマイズ手順です。

１．JavaScriptファイルの設定
下記を"calendar.js"というファイル名でローカル・サイト・パスに保存してください。念のためblogと同じ文字コードで保存してください。

var name = "blogCalendar";
 
// This function is quoted from Styleswitching JavaScript 
// http://jemimap.freeshell.org/style/scripts.html#styleswitcher
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
 
var yearmonth = readCookie(name);
if (yearmonth) {
    var iframe = this.document.getElementsByTagName('iframe');
    iframe[0].setAttribute("src","archive-URL/calendar/" + yearmonth + "/index.php");
}

archive-URLの部分は、管理画面の「基本設定」で設定した「アーカイブのURL」を設定してください。例えばアーカイブURLが

http://www.koikikukan.com/archives/

であれば上記のスクリプトは

iframe[0].setAttribute("src","http://www.koikikukan.com/archives/calendar/" + yearmonth + "/index.php");

となります。
本当は <$MTBlogURL$>archives/calendar/ という指定ができればいいのですが、calendar.js を外部ファイルにしているためMTタグはURLに変換されません。そういう訳で直接URLを記述します。

２．カレンダーテンプレート修正
まずカレンダーテンプレートの <head>～</head> の間に下記のJavaScriptを追加します。

<script type="text/javascript">
// This function is quoted and reconstructed from Styleswitching JavaScript 
// http://jemimap.freeshell.org/style/scripts.html#styleswitcher
function setMonth(value) {
    var name = "blogCalendar"; 
    expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    document.location.href = "<$MTBlogURL$>archives/calendar/" + value + "/index.php";
}
</script>

次にカレンダー表示タグの赤色部分を青色部分に置き換えてください。これは先のJavaScriptを起動するための変更です。

<caption class="calendarhead">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php">＜</a>
</MTArchivePrevious>
 
<$MTArchiveDate format="%B %Y"$> 
 
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php">＞</a>
</MTArchiveNext>
</caption>

<caption class="calendarhead">
<MTArchivePrevious>
<a href="#" onclick="setMonth('<MTArchiveDate format="%Y/%m">');return false;">&laquo;</a>
</MTArchivePrevious>
 
<$MTArchiveDate format="%B %Y"$> 
 
<MTArchiveNext>
<a href="#" onclick="setMonth('<MTArchiveDate format="%Y/%m">');return false;">&raquo;</a>
</MTArchiveNext>
</caption>

３．各テンプレートの修正
カレンダーを表示する各テンプレートの、カレンダータグのすぐ下あたり（または</body>の前でもOKと思います）に下記のcalendar.jsを起動するためのタグを追加します。"calendar"のスペルにご注意ください。

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" ・・・></iframe> 
</div>
 
<script type="text/javascript" src="<$MTBlogURL$>calendar.js"></script>

以上です。ブラウザ表示時の動作順序は、

今月のカレンダーを表示
その後すぐにcalendar.jsが起動されてcookieより年月取得
年月が取得できればその年月のカレンダーを表示
年月が取得できなければ何もしない（今月のカレンダーを表示）

です。
またカレンダー切り替え時の動作は、

カレンダーの月切り替えリンクをクリックした時にJavaScriptのsetMonthが起動されてcookieに年月保存

となってます。

月送りのリンクマークは"＜/＞"から"«/»"に変更しています（文字コードを指定しているにもかかわらず履歴ボタンを使用した時に文字化けが発生するケースがあったので）。ただし私のサイトでは"＜/＞"で正常に動作しているみたいですので適宜お試しください。
またスタイルシート切り替え用スクリプトで styleswitcher.js を利用されている方はJavaScript関数readCookieを削除されても問題ありません。ただし各テンプレートで calendar.js とペアで設定されていることが前提です。

2004.12.06 追記
calendar.js の配置先を「mt.cgiと同じディレクトリ」から「ローカル・サイト・パス」に変更（私の環境は自宅サーバでどちらも同じディレクトリですが、レンタルサーバユーザさんに誤解を与える記述でしたので修正致しました）。

2004.12.27 追記
「１．JavaScriptファイルの設定」で calendar.js のパス設定の説明を修正致しました。

Comments [59] | Trackbacks [13]

月送りカレンダー

September 24,2004 11:34 PM
Tag：[Calendar, Customize, MovableType]
Permalink

カレンダーを月送りタイプに変更するカスタマイズです。このカスタマイズを行うことでスクリーンショットのように年月の横に前月（および次月）のカレンダーへのリンクが表示されます。
参考サイトは下記です。ありがとうございました。

mavericyard*：月送りカレンダー
diving to ...：月間移動可能なMovableTypeのカレンダー【オリジナル】

以下、公開テンプレート用にデザインを修正した手順メモです。

2006.10.10 追記：現在 Ajax 月送りカレンダーを公開中です。

１．アーカイブテンプレート用ディレクトリ設定

この項目はアーカイブテンプレート専用のディレクトリを作成するためのものです。月送りカレンダーのためだけの設定ではありませんが、この設定を行うことでトップディレクトリ（index.html があるディレクトリ）をすっきりさせることができます。

注：この設定を行うと他のアーカイブテンプレートのURLも変更されます。変更したくない場合は、この項目をスキップしてください（ただし３項および５項のリスト内にある "archives/" を削除してください）。

設定方法は次の通りです。ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

１．１バージョン 3.2 以降

管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定。

アーカイブURL：http://ブログURL/archives/

アーカイブパス：アーカイブURLまでのパス

例えば、当サイトの場合、

アーカイブURL：http://www.koikikukan.com/archives/

アーカイブパス：/home/koikikukan/public_html/archives

という具合になります。

１．２バージョン 3.1x 以前

管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

ローカル・アーカイブ・パス：アーカイブURLまでのパス

アーカイブのURL：http://ブログURL/archives/

を設定します。

２．カレンダー用スタイルシート作成

ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

２．１バージョン 3.2 以降

管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前：カレンダー用スタイルシート

出力ファイル名：calendar.css

テンプレートの中身：リスト１をコピー＆ペースト

２．２バージョン 3.1x 以前

管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前：カレンダー用スタイルシート

出力ファイル名：calendar.css

テンプレートの中身：リスト１をコピー＆ペースト

@charset "<$MTPublishCharset$>";
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
.calendar {
    color: #444444;
    text-align: center;
}
.calendarhead {
    font-size: 9px;
    letter-spacing: .2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-top: 5px;
    font-size:8px;
    width : 20px ;
}
.calendar td {
    padding: 2px 0;
    font-size:10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: #0000ff;
}

リスト１：カレンダー用スタイルシート

３．カレンダー用アーカイブテンプレート作成

ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

３．１バージョン 3.2 以降

管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前：カレンダー

テンプレートの内容：リスト２（本日の日付部分がboldになるようにしています）

３．２バージョン 3.1x 以前

管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。

テンプレートの名前：カレンダー

テンプレートの内容：リスト２（本日の日付部分がboldになるようにしています）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0/ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /> 
</head>
<body >
<div class="calendar">
<table id="calendarTable" summary="<$MTArchiveDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">＞</a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" ><span class="holiday">Sun</span></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" ><span class="saturday">Sat</span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</body>
</html>

リスト２：カレンダー用アーカイブテンプレート

４．ファイルの関連付け

ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。

４．１バージョン 3.2 以降

予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施。

アーカイブの種類：月別（またはMonthly）

テンプレート：カレンダー

設定後、「追加」をクリック。正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加されます。追加された部分の設定は下記の通りです。

「優先」欄のラジオボタン：日付アーカイブのまま

「出力フォーマット」欄：リスト３

calendar/%y/%m/%i

リスト３：出力フォーマット（3.2 以降）

設定が完了した後の「アーカイブの設定」画面は左のようになります。設定内容が誤っていると正常にカレンダーが生成されません。ご注意ください。

４．２バージョン 3.1x 以前

管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施。

アーカイブの種類：月別（またはMonthly）

テンプレート：カレンダー

設定後、「保存」をクリック。正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加されます。

追加された部分の設定は下記の通りです。

「優先」欄のラジオボタン：日付アーカイブ（またはDate-Based Archive）のまま

「アーカイブ・ファイルのテンプレート」欄：リスト４

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

リスト４：アーカイブ・ファイルのテンプレート（3.1 以前）

設定が完了した後の「アーカイブの設定」画面は左のようになります。設定内容が誤っていると正常にカレンダーが生成されません。ご注意ください。

５．カレンダーの設置

「テンプレートの編集」で各テンプレートのカレンダー表示用タグ・リスト５（赤色）を全て削除し、カレンダー表示用の iframe タグのリスト６（青色）と入れ替えてください。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>
 
<MTCalendar> 
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>><span class="calendar">
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

リスト５：カレンダー用テンプレートタグ

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

リスト６：月送りカレンダー用 iframe タグ

６．サイトの再構築

以上です。これで過去の日別アーカイブへのリンクが有効になりました。
なお iframe を使用している関係上、カレンダー下の空白については制御することはできません（6週表示で丁度良い高さになります）。

2004.10.02 追記
その月のエントリーが存在しない状態で（コメント等により）再構築されるとカレンダーが表示されない状態になります。元サイトの記事を見てもこれという策はないみたいです（なぜ普通のカレンダーが生成されてこちらが生成されないのかは？です）。
回避策は、月が変わる前に空のエントリーを一旦「公開」で登録し、その後削除しておけばカレンダーが生成されます。ただしエントリーがないため前月のカレンダーに移動すると今月に戻るリンクがなく、動作的にはやや妙な感じです。これを回避する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照ください。

2004.10.04 追記
カレンダーからのリンクは日別アーカイブを参照する設定にしてますので、以下のいずれかの設定を実施してください。

【パターン１】
管理メニュー左より「ウェブログの設定」をクリックし、次ページの右上で「アーカイブの設定」をクリック。次ページで「アーカイブ」というタイトルの設定欄がありますので「日別」の左のチェックボックスをつけて再構築してください。
個人的にはこちがお勧めです（趣味の問題ですが）。

【パターン２】
テンプレートのカレンダーの設定部分に

<a href="<$MTEntryLink archive_type="Daily"$>">

というのがありますので、これを

<a href="<$MTEntryPermalink$>">

に変更。こちらはカレンダーを使っているテンプレート全てを修正する必要があります。

両者の違いですが、前者は1日分のエントリーが全て表示されるページにリンクされます。後者はその日の（多分）最初の個別アーカイブのエントリーにリンクされます（その代わりコメント欄も併せて表示されます）。

2004.12.21 追記
「カレンダーの設置」の説明の中で入れ替え前のカレンダータグを明示しました。

2005.01.04 追記
項番付与変更しました。また３項の青色部分のiframeのサイズを修正（幅160→150/高さ110→115）しました。

2005.02.02 追記
タイトルを「カレンダー切り替え」から「月送りカレンダー」に変更しました。

2005.02.24 追記
カレンダーファイルの拡張子を .php から .html に変更しました（PHPスクリプトが存在しないため）。

2005.06.05 追記
1日に表示されなくなる不具合を解消する記事へのリンクを追加しました。

2005.06.08 追記
２項の説明を修正しました。また設定後の画面を追加しました。

2005.10.31 追記
3.2-ja 用の記述を追加しました。また項番の割り振りを修正しました。

2006.03.23 追記
CSSとテンプレートの内容を見直しました。

2006.03.27 追記
テンプレートの日付アーカイブリンクに target 属性指定がもれてましたので修正しました。

2006.09.10 追記
記述を全面的に見直しました。

2006.09.12 追記
table 要素に id 属性を追加しました（休日表示カスタマイズのため）。

Comments [138] | Trackbacks [60]

カレンダーの文字サイズ修正

August 29,2004 12:45 AM
Tag：[]
Permalink

公開中のスタイルシートですが、カレンダーのリンク以外の日付の文字サイズが設定されていませんでした。設定されてないとエントリーされていない日の文字サイズが大きく表示されてしまう不具合が発生する場合があります。
現在テンプレートをご利用頂いている方は下記のスクリプトを styles-site.css の .calendar の下辺りに追加することで不具合は解消します。

.calendar td {
    font-size:9px;
}

なお公開版の方は修正済です。ご迷惑おかけして申し訳ございませんがよろしくお願い致します。

Comments [4] | Trackbacks [0]

カレンダーのリンク修正

August 7,2004 1:30 AM
Tag：[]
Permalink

月別アーカイブのページ分割後、カレンダーからクリックしたページのジャンプが思い切りおかしくなってました。デフォルト状態でのカレンダーからのリンクは、月別全体のページ＋aタグのname属性でジャンプするのですが、ページ分割をしてしまうとその機能が無効になります。

ということで、再びMagic Whiteさんのカスタマイズメモその3からからIllustrations "choco*choco"さんの「アーカイブの名前を変えたよ」へ（最後までよく読んでなかったですね…）。
手順は以下の通りです。

「アーカイブファイルのテンプレート」修正

管理メニューの「ウェブログの設定」→「アーカイブの設定」でアーカイブの「日別」にチェックして「アーカイブファイルのテンプレート」に

<$MTArchiveDate format="%Y/%m/%d"$>-index.php

を設定。変更を保存。

テンプレート修正

カレンダーを使っているテンプレートで赤色部分を青色部分のように変更

<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Monthly"$>#<$MTEntryID pad="1"$>">
<$MTCalendarDay$></a>
</MTEntries>

<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<$MTCalendarDay$></a>
</MTEntries>

サイトの再構築

以上です。日別でジャンプしたところのサイドメニューも少し修正したいのですがとりあえずここまで。ちなみにテンプレートを持っていかれた方は元々下の設定になっていました。2ヶ月表示に変更した時のテンプレートが上の設定になっていたようです（無知）。

非常にすっきりしましたが再構築時間がちょっと心配。

Comments [6] | Trackbacks [2]

カレンダー修正

June 13,2004 1:47 AM
Tag：[]
Permalink

以前、カレンダーの各曜日の幅が曜日名の文字の長さに依存していたので週末に向かって狭くなってました（笑）。昨日テンプレート一新の際、曜日のフォントを小さくして対処をしたのですがそれでも微妙にずれていたので各曜日の幅を一律指定。これでスッキリしました。
本当に直したいのはここではないのですが夜中になってしまったのでそこはまた今度。

Comments [0] | Trackbacks [0]

カレンダー強調表示

June 2,2004 12:57 AM
Tag：[]
Permalink

今日の日付がboldになるようにしました（わかりづらいですが）。
参考にさせて頂いたサイトは以下。

カレンダーで「今日」をハイライトする

Comments [0] | Trackbacks [0]

カレンダー2ヶ月表示に変更

June 1,2004 12:58 AM
Tag：[]
Permalink

月が替わると前月分が見えなくなるのが不満で追加しました。
参考にさせて頂いたサイトはこちら。

・カレンダーを複数表示

・MTのカレンダーを3ヶ月表示に変更

Comments [0] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site

MultiCalendar プラグイン v0.02

１．変更箇所

２．ダウンロード

Ajax ハイブリッド月送りカレンダー

１．スクリプトのダウンロード・アップロード

２．プラグインのダウンロード・アップロード

３．日別アーカイブの追加

４．カレンダーテンプレート作成（ダイナミックパブリッシング用）

５．カレンダーテンプレート作成（スタティックパブリッシング用）

６．テンプレート修正

６．１ 外部ファイルのインクルード

６．２ カレンダー表示部分の設定

７．CSS修正

８．再構築

９．注意事項

Ajax ダイナミック月送りカレンダー

１．概要

２．スクリプトのダウンロード・アップロード

３．プラグインのダウンロード・アップロード

４．日別アーカイブの追加

５．カレンダーテンプレート作成

デフォルトテンプレートの場合

公開テンプレートの場合

６．テンプレート修正

６．１ 外部ファイルのインクルード

６．２ カレンダー表示部分の設定

７．CSS修正

８．再構築

９．注意事項

１０．その他

複数ブログの情報をひとつのカレンダーにまとめて表示する

１．スタティックパブリッシング（その1）

２．スタティックパブリッシング（その2）

３．ダイナミックパブリッシング用

４．CSS

JavaScript カレンダー修正（シルバーウィーク対応）

Ajax 月送りカレンダー（jQuery・MT4版）

１．スクリプトのダウンロード・アップロード

２．カレンダーテンプレート作成

デフォルトテンプレートの場合

公開テンプレートの場合

２．１ ブログの文字コードがUTF-8以外の場合

３．カレンダーテンプレートを月別アーカイブに関連付け

４．日別アーカイブの追加

５．テンプレート修正

５．１ script 要素の追加

５．２ カレンダー表示部分の設定

５．３ 「カレンダー」ウィジェットの有効化

６．CSS修正

デフォルトテンプレートの場合

公開テンプレートの場合

７．再構築

８．ページ表示時にローディング状態を表示する場合

９．カレンダー取得失敗時にメッセージ等を表示する

１０．トラブルシューティング

１０．１ 一度も表示されない場合

１０．２ 一度表示され、リロードすると表示されなくなる場合

「Ajax 月送りカレンダー」の表示月をブログ記事の投稿月や月別アーカイブに連動させる

１．変更点（その1）

２．変更点（その2）

「Ajax 月送りカレンダー」で未来月のブログ記事を表示しない

１．変更点（その1）

２．変更点（その2）

３．謝辞

カテゴリー別 Ajax 月送りカレンダー（MT4版）

１．スクリプトのダウンロード・アップロード

２．カテゴリ別カレンダーテンプレート作成

２．１ ブログの文字コードがUTF-8以外の場合

３．カレンダーテンプレートを月別アーカイブに関連付け

４．日別アーカイブの追加

５．テンプレート修正

５．１ 外部ファイルのインクルード

５．２ カレンダー表示部分の設定

６．CSS修正

７．再構築

Ajax 日めくりカレンダー（MT4版）

１．スクリプトのダウンロード・アップロード

２．カレンダーテンプレート作成

２．１ ブログの文字コードがUTF-8以外の場合

６．１外部ファイルのインクルード

６．２カレンダー表示部分の設定

６．１外部ファイルのインクルード

６．２カレンダー表示部分の設定

２．１ブログの文字コードがUTF-8以外の場合

５．２カレンダー表示部分の設定

５．３「カレンダー」ウィジェットの有効化

１０．１一度も表示されない場合

１０．２一度表示され、リロードすると表示されなくなる場合

２．１ブログの文字コードがUTF-8以外の場合

５．１外部ファイルのインクルード

５．２カレンダー表示部分の設定

２．１ブログの文字コードがUTF-8以外の場合

５．１外部ファイルのインクルード

５．２カレンダー表示部分の設定

２．１ブログの文字コードがUTF-8以外の場合

５．１外部ファイルのインクルード

５．２カレンダー表示部分の設定

１０．１一度も表示されない場合

１０．２一度表示され、リロードすると表示されなくなる場合

２．１ブログの文字コードがUTF-8以外の場合

４．１外部ファイルのインクルード

４．２カレンダー表示部分の設定

２．１ブログの文字コードがUTF-8以外の場合

４．１外部ファイルのインクルード

４．２カレンダー表示部分の設定

２．１ブログの文字コードがUTF-8以外の場合