縦型のカレンダーを出力する

MTQに、「一番左が日付、次が曜日で、その次が内容などの縦型のカレンダーを出力したい」という質問が上がっていました。
この質問に答えます。

1.考え方

Movable Typeでは、カレンダーを出力するにはMTCalendar系のタグを使います。
MTCalendar系のテンプレートタグは、主に横型（7列×4～6行）のカレンダーを出力することを想定しています。

しかし、縦型のカレンダーも出力することができます。
考え方は以下のようになります。

1-1.月初／月末の空のセルをスキップする

横型のカレンダーでは、月初と月末に空のセルができます。
例えば、1日が火曜日で始まる月の場合、1日の前の日曜日と月曜日が空のセルになります。

MTCalendarタグのブロックでは、月初／月末の空のセルも出力されます。
しかし、縦型のカレンダーでは、月初／月末の空のセルは不要です。

空のセルかどうかを判断するには、MTCalendarIfBlankタグを使います。
また、空でないセルを出力したいので、MTCalendarIfBlankタグのブロックの中でMTElseタグを使います。
ここまでの話から、縦型のカレンダーを出力するには、基本的には以下のようにテンプレートを組みます。

<mt:Calendar>
  <mt:CalendarIfBlank>
  <mt:Else>
    それぞれの日の情報を出力する処理
  </mt:CalendarIfBlank>
</mt:Calendar>

1-2.それぞれの日の曜日を出力する

横型のカレンダーだと、カレンダーの先頭に曜日を決め打ちで出力することができます。
一方、縦型のカレンダーの場合、曜日は個々の日に応じて出力するので、決め打ちにすることができません。

横型のカレンダーでは、MTCalendarDayタグを使って、個々の日の日付を出力することが一般的です。
しかし、MTCalendarDayタグでは、曜日を出力することができません。

曜日など、個々の日の詳細な情報が必要なときには、MTCalendarDateタグを使います。
MTCalendarDateタグでは、formatモディファイアで出力形式を指定することができます。
「format="%a"」とすることで、個々の日の曜日を出力することができます。

2.テンプレートの組み方の例

縦型のカレンダーを出力する例は、以下のようになります。
11行目で日付（MTCalendarDayタグ）、12行目で曜日（MTCalendarDateタグ）を出力します。
そして、13～19行目で、個々の日の記事一覧を出力します。

<table>
  <tr>
    <td>日</td>
    <td>曜日</td>
    <td>記事</td>
  </tr>
  <mt:Calendar>
    <mt:CalendarIfBlank>
    <mt:Else>
      <tr>
        <td><$mt:CalendarDay$></td>
        <td><$mt:CalendarDate format="%a"$></td>
        <td>
          <mt:Entries>
            <mt:EntriesHeader><ul></mt:EntriesHeader>
              <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
            <mt:EntriesFooter></ul></mt:EntriesFooter>
          </mt:Entries>
        </td>
      </tr>
    </mt:CalendarIfBlank>
  </mt:Calendar>
</table>