top

リアルタイムカレンダー

先日買った「公式タグリファレンス」に面白そうなタグがあったので、ちょっと遊んでみました。

<MTCalendarIfToday>~</MTCalendarIfToday>

カレンダー内で日付が「今日」の時だけ表示するタグなんだそうです。これを使えばカレンダーに「今日」の日付を表示することが出来ますね。「カレンダーが再構築された時点での今日」ということなので、静的生成ではその日に更新がないと「今日」になりませんが、ダイナミック・パブリッシングなら更新や再構築の有無にかかわらず、常にアクセスした時点での「今日」を表示することが出来ます。

よって、ダイナミックならこのタグを入れるだけで即座に「リアルタイムカレンダー」になりますねっ♪
以下、いろいろ試してみたサンプルの覚え書きです。

■下準備
リアルタイムにするならダイナミックでないと意味ありません。よってダイナミック生成のカレンダーを使いますので、例によってアーカイブマッピングでの日別頁アドレスの準備をしておきます(詳しくはこちらを)。ここでは日別頁のアドレスは<$MTBlogArchiveURL$><$MTArchiveDate format="%Y%m%d"$>.htmlとしたものとして進めます。

■通常型カレンダー

<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
<caption><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="日曜日">日</th>
<th abbr="月曜日">月</th>
<th abbr="火曜日">火</th>
<th abbr="水曜日">水</th>
<th abbr="木曜日">木</th>
<th abbr="金曜日">金</th>
<th abbr="土曜日">土</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfToday><td class="tody">
<MTElse><td></MTElse>
</MTCalendarIfToday>
<MTCalendarIfEntries><MTEntries><MTDateHeader>
<a  href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y%m%d"$>.html" title="</MTDateHeader>[<$MTEntryTitle$>]<MTDateFooter>">
<$MTCalendarDay$></a>
</MTDateFooter>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>

スタイルシート

.tody {
    background : #EEEEEE;
    border : 1px solid #CCCCCC;
}

■横一列型カレンダー

<b><$MTDate format="%Y&nbsp;%b"$></b>|
<MTCalendar>
<MTCalendarIfEntries>
<MTEntries><MTDateHeader>
<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y%m%d"$>.html" title="</MTDateHeader>[<$MTEntryTitle$>]<MTDateFooter>">
<MTCalendarIfToday><span class="tody"></MTCalendarIfToday>
<$MTCalendarDay$>
<MTCalendarIfToday></span></MTCalendarIfToday>
</a>
</MTDateFooter></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<MTCalendarIfToday><span class="tody"></MTCalendarIfToday>
<$MTCalendarDay$>
<MTCalendarIfToday></span></MTCalendarIfToday>
</MTCalendarIfNoEntries>
</MTCalendar>

ここではスタイルシートは上の通常版と共有にしてありますが、好みでアレンジをどうぞ。

いずれも青字の部分がこのタグによって追加・編集された部分です。

■応用~画像表示横一列カレンダー

<b><$MTDate format="%Y&nbsp;%b"$></b>|
<MTCalendar>
<MTCalendarIfEntries>
<MTEntries><MTDateHeader>
<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="%Y%m%d"$>.html" title="</MTDateHeader>[<$MTEntryTitle$>]<MTDateFooter>">
<MTCalendarIfToday><img border="0" src="画像のアドレス">
<MTElse>
<$MTCalendarDay$>
</MTElse></MTCalendarIfToday>

</a>
</MTDateFooter></MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<MTCalendarIfToday><img border="0" src="画像のアドレス">
<MTElse>
<$MTCalendarDay$>
</MTElse></MTCalendarIfToday>

</MTCalendarIfNoEntries>
</MTCalendar>

↑「今日」の日付部分が数字ではなくて画像になっています。

上記3つの動作サンプル(もちろんダイナミック頁です)

ただしコレ、今のスタイルだと使い道がないところがアレですが…(笑)。
まあこやって書き留めておけば、いつか使う日が来るかもしれない…かも(う~むむ)。

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。