TopMovable Typeカスタマイズカレンダー > 2005年1月
2005年1月 4日

リアルタイムカレンダー(改)

January 4,2005 6:10 PM
Tag:[, , ]
Permalink

Movable Type がサポートするカレンダーでは、エントリー投稿やコメント投稿が行われないとカレンダー(のリンク)は更新されません。したがって MTCalendarIfToday タグを利用して本日の日付を装飾するカスタマイズを行っている場合も、先の動作がない限りカレンダーの本日表示は更新されません。
本カスタマイズは仕様に依存せず、リアルタイムに日付を更新させます(ブラウザの更新等は必要です)。本日の日付がリアルタイムに更新されることを指して「リアルタイムカレンダー」と(勝手に)命名しました。なおカレンダー自体が存在しない月跨りについては機能の対象外ですので予めご了承ください。

注:本エントリーではPHP化が必要なため、現在は JavaScript によるカスタマイズを推奨しています。詳細は下記のエントリーまたはカレンダーアーカイブをご覧ください。


このカスタマイズを行う前提条件はPHPが利用可能なこと、つまりカレンダータグを利用するテンプレートのファイル名の拡張子が .php になっていることです(詳細は後述)。
オリジナルサイトは下記です。ありがとうございました。

kamishiro.netphpを使って今日の日付部分を動的にハイライトする方法

また記事のURLは以前よりこのカスタマイズを利用されていた Magic White さんより教えて頂きました(自力で発見できず…)。併せてありがとうございました。

タイトルの「改」は下記を指しています。

  • 文字自体のスタイル設定だったオリジナルからテーブルのカラムにスタイルを与えられるように変更
  • 本日であることを日でしか判定していなかったので年月日判定を追加(月送りカレンダー用)

ここでは拡張子がすでに .php になっている場合とそうでない場合、および月送りカレンダー利用の場合の3つのケースについて説明しています。それぞれに必要な項目は下記の通りです。

拡張子が .php になっている場合:1、2.1(または2.3)
拡張子が .php になっていない場合:1、3、4
月送りカレンダーの場合:1、2.2

月送りカレンダーの場合の注意事項

  • 本エントリーとは別に月送りカレンダーでのカスタマイズが必要です。
  • カレンダー用テンプレートのファイル名の拡張子は .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 になっていない場合は、本エントリー3項のリストの下半分(空行から下の部分)を2.3項のリストに置き換える形で行ってください。
  • 月送りカレンダー用ファイルの拡張子を「.html」から「.php」に変更した際、.html ファイルが残っているとカレンダーが正常に表示されない場合があります。 .html ファイルは必ず削除してください。

1.スタイルシートにカレンダー用スタイルの追加(共通)

スタイルシートのcalendar設定の下辺りに下記の青色部分を追加します。リストは公開テンプレートを例にしています。設定部分は2パターン掲載していますので不要な部分を削除して設定内容を適宜修正してください。

.calendar table {
    padding: 0px;
    border-collapse: collapse;
}
 
.today {
    background : #000000; /* 背景色をつける設定 */
    border : 1px solid #000000; /* 枠線をつける設定 */
}

注:月送りカレンダーの方は、上記の設定をカレンダー用スタイルシート(calendar.css)の一番下に追加してください。

2.カレンダー関連タグの変更(拡張子が .php になっている場合/月送りカレンダーの場合)

カレンダーの設定がされている各テンプレートの <MTCalendar>~</MTCalendar> の部分を下記のスクリプトに変更します。利用中のカレンダーによって2種類のテンプレートを用意していますので該当する方をお使いください。

2.1 通常の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>

2.2 月送りカレンダーの場合

月送りカレンダーご利用の方は「アーカイブ・テンプレート」の「カレンダー」に設定されている該当部分を下記に変更してください。

<?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ヶ月用のタグを使うと毎月同じ日に印がつきますのでご注意ください。

2.3 横型カレンダーの場合

このカレンダーは table タグを用いてないパターンです。1項のスタイルシートは .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>

3.カレンダー用インデックステンプレートの作成(拡張子が .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>

設定終了後、保存・再構築してください。

4.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]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3