小粋空間の横型カレンダーに
「休日表示付きリアルタイムカレンダー（月送り・横型） 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>
<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>
≫アーカイブパスの設定
管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、
その下に表示されたフォームに下記の内容を設定します。
・アーカイブ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”のリンクがおかしくなることがあります。
”Monthry Archive”をクリックしてみて、表示がおかしくなりましたら、
上記画像の赤丸部分にチェックをして変更を保存して下さい。
カレンダー・アーカイブにチェックがされていなくてもちゃんと動作しますので。
（優先度が日付アーカイブのほうからに変わるだけです）
カレンダーの日付やリンク色はご自分のブログに合わせて適宜変更してください。
その際の変更箇所は、カレンダー用のスタイルシートを変更すればＯＫです。
このカレンダーの設置環境はMovableType3.2ja以降です。
それ以前の環境では動作の保障は致しかねませんのでご了承下さい。
]]>
