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

小粋空間の横型カレンダーに
「休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Type」
が追加されました。しかし、そこで問題が発生！！

なんと、このカレンダー、phpに対応していないのです！
そこで今回はこのカレンダーをphpの環境下でも設置できるように
カスタマイズしてみました。

完成するとスクリーンショットのような表示になります。
（画像をクリックすると全体が表示されます）
カスタマイズ・設置方法は"続きを読む"からどうぞ。

まずは小粋空間の
「休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Type」の
通りに設置してください。

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

必ず休日表示用カレンダースクリプト dayChecker.js をダウンロードして
index.php と同じディレクトリにアップロードしてください。
アップロードがお済みでない場合、エラーがでる可能性があります。

次に手順どおりに設置した各ファイルのソースを、以下のソースと差し替えてください。

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

body {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
color:#666666;
}
a,
a:link,
a:active,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
cursor: crosshair;
}

.calendar {
margin-top: 5px;
margin-bottom: 7px;
text-align: center;
padding-bottom: 1px;
}
.calendarHead-r,
.calendarHead-r a:link,
.calendarHead-r a:visited,
.calendarHead-r a:active {
color:#e50003;
text-decoration: none;
padding-right: 5px;
}
.calendarHead-r a:hover {
color:#000000;
text-decoration: underline;
padding-right: 5px;
}
.calendarHead-l,
.calendarHead-l a:link,
.calendarHead-l a:visited,
.calendarHead-l a:active {
color:#e50003;
text-decoration: none;
padding-left: 5px;
}
.calendarHead-l a:hover {
color:#000000;
text-decoration: underline;
padding-left: 5px;
}

.today {
border : 1px solid #444444;
}
.holiday {
color: #e50003;
text-decoration: none;
}
.holiday a:link,
.holiday a:visited {
color: #e50003;
text-decoration: underline;
}
.holiday a:hover {
color: #000000;
text-decoration: none;
}
.saturday {
color: #666666;
}
.saturday a:link,
.saturday a:visited {
color: #000000;
}
.tholiday {
border: 1px solid #444444;
color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
color: #e50003;
}
.tholiday a:hover {
color: #000000;
}
.tsaturday {
border: 1px solid #444444;
color: #666666;
}
.tsaturday a:link,
.tsaturday a:visited {
color: #000000;
}

≫カレンダー用アーカイブテンプレート
・テンプレート名：カレンダー・アーカイブ（名称は何でも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$>cal.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-r">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php" title="<$MTArchiveDate format="%Y/%m"$>を表示する"><$MTArchiveDate format="%B %Y" language="en"$> «</a>
</MTArchivePrevious>
</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>
<span class="calendarHead-l">
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php" title="<$MTArchiveDate format="%Y/%m"$>を表示する">» <$MTArchiveDate format="%B %Y" language="en"$></a>
</span>
</MTArchiveNext>
</div>

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>

≫アーカイブパスの設定
管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、
その下に表示されたフォームに下記の内容を設定します。

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

例えば当サイトであれば

アーカイブURL：http://logue.apricotte.net/archives/
アーカイブパス：/home/atoria/www/logue/archives

という具合になります。

≫カレンダーテンプレートを月別アーカイブに関連付け
管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある
「マッピングを新規作成」をクリックして下記の設定を実施してください。

・アーカイブの種類：月別
・テンプレート：カレンダー・アーカイブ

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、
”カレンダー・アーカイブ”が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある
「出力フォーマット」に下記を設定してください。

calendar/%y/%m/index.php

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

≫各テンプレートの修正
カレンダーを設置したテンプレートのカレンダー表示用の iframe 要素を
下記のカレンダー表示用の iframe 要素と差し替えてください。

<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTEntries lastn="1" sord_order="descend"><$MTEntryDate format="%Y/%m/index" $></MTEntries>.php" 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: 5px;
padding-top: 5px;
border-bottom : 1px solid #666699;
}

以上です。
ここまでの設定が終わったら、管理メニューの「サイトを再構築」→「すべてを再構築」を
選択・再構築を実行して、カレンダーを設定したページを表示し、
横型カレンダーがタイトル下に表示されること、月送りができることを確認してください。
スタイルは WindowsXP：IE/Firefox で確認しています。

≫注意事項（必ず読んでください）
このカレンダーを設置するにあたって、「公開の設定」で”アーカイブ・マッピング”を
以下の設定にしている場合、”Monthry Archive”のリンクがおかしくなることがあります。