Home > Movable Type > Movable Type リアルタイムカレンダー カレンダーの今日の日付に装飾

Movable Type リアルタイムカレンダー カレンダーの今日の日付に装飾

  • Posted by: 南野 せな
  • 2006年9月19日 05:04
  • Movable Type

以前から考えていたカレンダーの今日の日付の背景色を変える設定をしました。

*カレンダー今日の日付を判別

Movable Tyepのカレンダーで今日の日付を判別するタグがあります。

Movable Type 3.3 マニュアル: テンプレート・タグ リファレンス MTCalendarIfToday

MTCalendarIfToday
セルが今日の日付であったときに処理する条件タグです。
対応しているバージョン
3.1, 3.2, 3.3, Enterprise 1.0
利用方法
<MTCalendarIfToday> ? </MTCalendarIfToday>

しかし、このタグだと再構築した時にしか反映されません。つまり、数日を過ぎても再構築をしなかったら最後に再構築をした日にしか装飾されません。毎日必ず0時過ぎに再構築をするような人でなければ意味がありません。

そこで、カレンダーのタグとPHPを組み合わせて今日の日付を判別する事にします。

*該当ページのPHP化

サーバが既にPHPに対応している事を前提で、今回はメインインデックス(index.html)のみPHP化をします。

「メイン・メニュー > (該当ブログ名) > テンプレート」のページにて「メインページ(index.html)」でテンプレート編集画面に移ります。「出力ファイル名」が「index.html」となっているのを「index.php」に変更、1行目が

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

と、なっているのをPHP形式の

<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

に変更します。保存&再構築をしてPHP化の完了です。

*スタイルシートの編集

「メイン・メニュー > (該当ブログ名) > テンプレート」の「スタイルシート(styles-site.css)」の編集画面に移ります。

カレンダーのスタイルを設定している辺りに以下を挿入します。

.calendar .today {
   background-color: #eeeeee;
}

カレンダーで今日の背景色をグレーに変更する設定です。 # ちょいデザイン的によろしくないのですが、これは(仮)という事で(汗)。

*今までのソース

これから弄る今までのソースです。

<!-- カレンダー開始 -->
<div class="side">
<div class="calendar">
<MTArchiveList archive_type="Monthly" lastn="1">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
<caption>
<MTArchivePrevious><a href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>">&lt;&lt;</a></MTArchivePrevious>
<a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B %Y"$></a>&gt;&gt;
</caption>
<tr>
<th abbr="日曜日" style="color:#cc9999">日</th>
<th abbr="月曜日">月</th>
<th abbr="火曜日">火</th>
<th abbr="水曜日">水</th>
<th abbr="木曜日">木</th>
<th abbr="金曜日">金</th>
<th abbr="土曜日" style="color:#9999cc">土</th>
</tr>
<MTCalendar month="this"><MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfEntries><MTEntries lastn="1"> class="calent"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries>><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</MTArchiveList>
</div>
</div>
<!-- カレンダー終了 -->

サイドバー自体をモジュール化していますが、メインインデックスに直接書き込んでもソースは同じです。これを元にして編集していきます。

*プログラムの編集(参考ソース)

リアルタイムカレンダーに編集するに辺り、以下のページを参考にしました。

小粋空間 : リアルタイムカレンダー(改)

その中でも私の場合は「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>

しかし、当然このままコピー&ペーストしても使えないので、自分用に以下のソースへ変更しました。

省略

<?php $day = date("j"); $year = date("Y"); $month = date("m"); ?>
<MTCalendar month="this"><MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = " class=\"today\""; } else { $style = ""; } print "$style"; ?><MTEntries lastn="1"> class="calent"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></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 = ""; } print "$style"; ?>><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

ここで、<MTCalendarIfEntries>と<MTCalendarIfNoEntries>が同じプログラムを使っている事が分かり、余り綺麗なプログラムではないと思い改良に入りました。

*プログラムの編集(改良)

改良の結果は以下の通りです。

<?php

function mt_today($y, $m, $d) {

$day = date("j");

$year = date("Y");

$month = date("m");

if($year == $y && $month == $m && $day == $d) {

print " class=\"today\"";

}

}

?>

<MTCalendar month="this"><MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td<MTCalendarIfEntries><?php mt_today("<$MTCalendarDate format='%Y'$>", "<$MTCalendarDate format='%m'$>", "<$MTCalendarDay$>"); ?><MTEntries lastn="1"> class="calent"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries>

<?php mt_today("<$MTCalendarDate format='%Y'$>", "<$MTCalendarDate format='%m'$>", "<$MTCalendarDay$>"); ?>><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>>&nbsp;</MTCalendarIfBlank></td>

<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>

</MTCalendar>

同じプログラムの部分はfunction関数を使い、関数呼び出し時の引数に<$MTCalendarDate$>タグを入れました。

最初、<$MTCalendarDate$>はfunction内で使っていたのですが、このタグは<MTCalendarIfEntries>タグや<MTCalendarIfNoEntries>タグ内でしか使えないという事で、引数にする事で対応しました。

あとプログラムをよりスマートにするためにif文の中にprint文を入れ、else文は省略しました。どうせelseの中はnullだったのですから。

今までPHPは既に出来上がったプログラムを設置しただけで、実際に編集して動かしたのは初めてでしたが何とかできましたー。はふぅ...。

*その他

私の場合、メインインデックスをPHP化する時にhtmlファイルとphpファイルの両方を作ったので、index.phpを優先的に表示する設定も.htaccessで行いました。

DirectoryIndex index.php index.html index.htm

.htaccessの動き、詳細記述については検索を掛けてください...。

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://weblog.sena.jp/mt/mt-tb.cgi/496
Listed below are links to weblogs that reference
Movable Type リアルタイムカレンダー カレンダーの今日の日付に装飾 from Heartless -Sena-

Home > Movable Type > Movable Type リアルタイムカレンダー カレンダーの今日の日付に装飾

Search
Feeds

Return to page top