Movable Typeのカレンダーで休日の表示

MT_original_calender.jpg Movable Typeのカレンダーではいろいろなことができます。カレンダー表示において本来の休日など以外の日付に色をつけたりマーキングしたりしたい場合があると思います。ビジネスブログにおいてはその会社の休日が日曜ではない場合がありますし、指定した日付に違う色をつけたいという場合もあると思います。
 デフォルトのMTカレンダーは土曜、日曜に色がついていて、エントリーが登録された日、または「本日」に適当な色でマーキングされていると思います。そこら辺りをちょっと改造する方法を紹介します。ここではPHPを使うのでパブリッシングされたファイル拡張子が.phpであることが前提です。
 この方法は小粋空間さんで紹介しているAjaxの月めくりのカレンダーでも作動します。小粋空間さんではMT4で解説していますがMT5でも作動します。

休日の赤を違う曜日にする(通常のMTタグ)

 例えば毎週火曜日を休日にしたい場合には、以下のようなテンプレートタグになります。原理は非常に簡単でカレンダーの各セルには番号(<$mt:CalendarCellNumber$>)を割り振ることができます。この番号は月の最初から順番に割り振ってゆきますので、3,10,17,24,31が火曜日ということになります。同様に4,11,18,25,32が水曜日ということになり、その番号の時だけclassでマークアップするというだけです。

MTカレンダータグ

<h1>火曜日が休日のカレンダー</h1>
<table id="calendar" summary="月間カレンダー" border="1">
  <tr>
    <th id="sun">日</th>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
    <th>土</th>
  </tr>

<mt:Calendar month="201002">
  <mt:CalendarWeekHeader><tr></mt:CalendarWeekHeader>

  <td
    id="cell<$mt:CalendarCellNumber$>"
    <mt:CalendarIfToday>class="today"</mt:CalendarIfToday>
<?
//火曜日を休日にする
$call_number = '<$mt:CalendarCellNumber$>';
if ($call_number == 3) { 
  print 'class="tue"';
} elseif ($call_number == 10) {
  print 'class="tue"';
} elseif ($call_number == 17) {
  print 'class="tue"';
} elseif ($call_number == 24) {
  print 'class="tue"';
} elseif ($call_number == 31) {
  print 'class="tue"';
} elseif ($call_number == 38) {
  print 'class="tue"';
}
?>
  >

    <mt:Ignore>記事のある日を表示</mt:Ignore>
    <mt:CalendarIfEntries>
      <mt:Entries lastn="1">
        <a href="<$mt:Entrypermalink$>"><$mt:CalendarDay$></a>
      </mt:Entries>
    </mt:CalendarIfEntries>

    <mt:CalendarIfNoEntries>
      <$mt:CalendarDay$>      
    </mt:CalendarIfNoEntries>
  </td>

  <mt:CalendarWeekFooter></tr></mt:CalendarWeekFooter>
</mt:Calendar>
</table>

CSSソース

火曜日に指定したクラス(<td id="cell3" class="tue">...)にスタイルシートで色をつけます。
.tue {
    color: #f00;
}
.tue a, .tue a:link, .tue a:visited {
    color: #f00;
}

Ajaxカレンダーで違う曜日を休日にする

 Ajaxのひめくりカレンダーもカレンダーをアーカイブでパブリッシングするという原理は通常のカレンダーと全く同じなので指定の曜日にclassを与えるだけでOKです。

1. まず、アーカイブテンプレートの「カレンダー」を開きます。(小粋空間さんの紹介するやり方で設定している場合です。)
2. 以下の部分のソースを探します。
  ...
  <MTCalendar month="this">
    <MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
    <td>
      <MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank>
        <MTCalendarIfEntries>
        <MTEntries lastn="1">
  ...
3. <td>の部分にPHPのソースを貼り付けます。(火曜を休日にする場合)
...
  <MTCalendar month="this">
    <MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
    <td
<?
//火曜日を休日にする
$call_number = '<$mt:CalendarCellNumber$>';
if ($call_number == 3) {
  print 'class="tue"';
} elseif ($call_number == 10) {
  print 'class="tue"';
} elseif ($call_number == 17) {
  print 'class="tue"';
} elseif ($call_number == 24) {
  print 'class="tue"';
} elseif ($call_number == 31) {
  print 'class="tue"';
} elseif ($call_number == 38) {
  print 'class="tue"';
}
?>
    >
      <MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank>
        <MTCalendarIfEntries>
        <MTEntries lastn="1">
  ...
4. 保存してから再構築してください。指定の曜日(この場合は火曜日)に<td class="tue">が追加されて表示されます。
5. CSSで休日を表示する色を指定します。AjaxカレンダーのCSSの以下の部分を探してコメントアウトします。
/* 日曜と祝日、土曜の表示色をコメントアウトします。
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #ff6600;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #006699;
}
*/
6. 以下のCSSを追加してください。
.tue {
    color: #f00;
}
.tue a, .tue a:link, .tue a:visited {
    color: #f00;
}