【Movable Type】カレンダー機能を利用する
概要
MTにはひと月分のカレンダーを表示する機能が実装されています。
本記事では、このカレンダー機能を利用して「イベントカレンダー」を作成する方法を解説しています。
カレンダーを出力するためのブロックタグは2種類あります。記事の場合もコンテンツタイプの場合もタグが違うのみで、コードの構成は同じです。なお、MTCalendar
はPowerCMSにおいても実装可能です。
-
MTCalendar
(記事) -
MTContentCalendar
(コンテンツタイプ)
以降のサンプルで使用するコンテンツタイプの設定は以下です。
- コンテンツタイプ名:イベントカレンダー(ID: 4)
- コンテンツフィールド
- イベント名(テキスト / 入力必須)
- イベントカテゴリ(カテゴリ / 入力必須)
カレンダー上には「イベント名」と「イベントカテゴリ」のみ表示させ、各コンテンツデータの詳細ページへリンクさせる想定です。実際に作成する際は、必要に応じて詳細ページに表示する項目とフィールドを追加してください。
コード例
MTのカレンダー機能には、前後月へのリンクを生成するタグがありません。
前後月のリンクをつける場合は、コンテンツタイプリストアーカイブテンプレートの「月別」アーカイブマッピングを利用し、MTArchiveLink
で前後月のリンクを出力します。
以下のコード例は縦型カレンダーの出力例です。1行が7日ずつの表組カレンダーのコードは、公式リファレンスのコード例をご確認ください。
<!-- MTML -->
<mt:ArchiveDate format="%Y%m" setvar="catendarMonth">
<h1><$mt:ArchiveDate format="%Y年%b月"$>のイベントカレンダー</h1>
<ul>
<mt:ArchivePrevious><li><a href="<$mt:ArchiveLink$>">« 前月</a></li></mt:ArchivePrevious>
<mt:ArchiveNext><li><a href="<$mt:ArchiveLink$>">次月 »</a></li></mt:ArchiveNext>
</ul>
<table>
<tbody>
<mt:ContentCalendar month="$catendarMonth" content_type="4">
<mt:CalendarIfContents>
<tr<mt:CalendarIfToday> class="today"</mt:CalendarIfToday>>
<td><$mt:CalendarDate format="%e(%a)" strip=""$></td>
<td>
<mt:Contents>
<mt:ContentsHeader><ul></mt:ContentsHeader>
<li>
<a href="<$mt:ContentPermalink$>">
<mt:ContentField content_field="イベントカテゴリ"><span><$mt:CategoryLabel$></span></mt:ContentField>
<mt:ContentField content_field="イベント名"><mt:ContentFieldValue></mt:ContentField>
</a>
</li>
<mt:ContentsFooter></ul></mt:ContentsFooter>
</mt:Contents>
</td>
</tr>
</mt:CalendarIfContents>
<mt:CalendarIfNoContents>
<tr<mt:CalendarIfToday> class="today"</mt:CalendarIfToday>>
<td><$mt:CalendarDate format="%e(%a)" strip=""$></td>
<td>...</td>
</tr>
</mt:CalendarIfNoContents>
</mt:ContentCalendar>
</tbody>
</table>
<!-- 出力結果(長いので一部を省略しています) -->
<h1>2025年2月のイベントカレンダー</h1>
<ul>
<li><a href="前月アーカイブのURL">« 前月</a></li>
<li><a href="次月アーカイブのURL">次月 »</a></li>
</ul>
<table>
<tbody>
<tr>
<td>1(土)</td>
<td>
<ul>
<li>
<a href="コンテンツデータ詳細">
<span>カテゴリ名</span>
タイトル
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>2(日)</td>
<td>...</td>
</tr>
<tr>
<td>3(月)</td>
<td>...</td>
</tr>
<tr>
<td>4(火)</td>
<td>
<ul>
<li>
<a href="コンテンツデータ詳細">
<span>カテゴリ名</span>
タイトル
</a>
</li>
<li>
<a href="コンテンツデータ詳細">
<span>カテゴリ名</span>
タイトル
</a>
</li>
</ul>
</td>
</tr>
<tr class="today">
<td>5(水)</td>
<td>...</td>
</tr>
<tr>
<td>6(木)</td>
<td>...</td>
</tr>
<tr>
<td>7(金)</td>
<td>...</td>
</tr>
<!-- 8(土)〜26(水)までのHTMLを省略 -->
<tr>
<td>27(木)</td>
<td>...</td>
</tr>
<tr>
<td>28(金)</td>
<td>...</td>
</tr>
</tbody>
</table>
一応、MTCalendar
(記事)を利用した場合のコード例も記載しておきます(長いので折りたたみ)
こちらも前後月のリンクをつける場合は、記事リストアーカイブテンプレートの「月別」アーカイブマッピングを利用します。
MTCalendarのコード例
<mt:ArchiveDate format="%Y%m" setvar="catendarMonth">
<h1><$mt:ArchiveDate format="%Y年%m月"$>のイベントカレンダー</h1>
<ul>
<mt:ArchivePrevious><li><a href="<$mt:ArchiveLink$>">« 前月</a></li></mt:ArchivePrevious>
<mt:ArchiveNext><li><a href="<$mt:ArchiveLink$>">次月 »</a></li></mt:ArchiveNext>
</ul>
<table>
<tbody>
<mt:Calendar month="$catendarMonth">
<mt:CalendarIfEntries>
<tr<mt:CalendarIfToday> class="today"</mt:CalendarIfToday>>
<td><$mt:CalendarDate format="%e(%a)" strip=""$></td>
<td>
<mt:Entries lastn="0">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<$mt:EntryPermalink$>">
<span><$mt:CategoryLabel$></span>
<$mt:EntryTitle$>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>
</td>
</tr>
</mt:CalendarIfEntries>
<mt:CalendarIfNoEntries>
<tr<mt:CalendarIfToday> class="today"</mt:CalendarIfToday>>
<td><$mt:CalendarDate format="%e(%a)" strip=""$></td>
<td>...</td>
</tr>
</mt:CalendarIfNoEntries>
</mt:Calendar>
</tbody>
</table>
とりあえず覚えておくといいMTタグとモディファイア
カレンダー機能のタグは、処理と仕様が少し独特です。
以下、MTタグでEntries
とついているものは記事、Contents
とついているものはコンテンツタイプで利用します。見出しの各MTタグで/
で区切ってあるもののうち、前のMTタグは記事で、後のMTタグはコンテンツタイプで利用します。
MTCalendar / MTContentCalendar
ひと月分のカレンダーを表示するためのブロックタグ。
month
表示するカレンダーの月を指定する。指定できる値はいくつかあるが、通常のカレンダーであればYYYYMM
を指定でOK。
content_type
MTContentCalendar
を利用する場合、対象となるコンテンツタイプの以下いずれかを指定する。指定は必須。
- コンテンツタイプID
- コンテンツタイプ名
- コンテンツタイプ ユニークID
category
値に指定したカテゴリ名のカレンダーを出力する。
コンテンツタイプの場合は、category_set
(値はIDまたはカテゴリセット名)も併せて指定する必要がある。
MTCalendarIfEntries / MTCalendarIfContents
表示される記事やコンテンツデータがある場合に処理される条件タグ。
MTCalendarIfNoEntries / MTCalendarIfNoContents
表示される記事やコンテンツデータがない場合に処理される条件タグ。
上記同様MTElse
は利用できない。
MTCalendarDay
カレンダーの日付のみを出力する。MTCalendarIf~
またはMTCalendarIfNo~
の中で利用する。
日付以外も出力する場合は、MTCalendarDate
を利用する。
MTCalendarDate
format
モディファイアを指定することで、カレンダーの日付以外に曜日などを出力できる。MTCalendarIf~
またはMTCalendarIfNo~
の中で利用する。
指定できる値は公式リファレンス参照。
MTCalendarIfToday
MTCalendar
あるいはMTContentCalendar
内において、「今日の日付」の場合に処理される。
MTCalendarWeekHeader
週の始まりのときに実行する条件タグ。1行が7日ずつの表組カレンダーにおいて、tr
タグの出力などに利用できる。
<!-- MTML -->
<mt:ArchiveDate format="%Y%m" setvar="catendarMonth">
<table>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<mt:ContentCalendar month="$catendarMonth" content_type="4">
<mt:CalendarWeekHeader>
<tr>
</mt:CalendarWeekHeader>
<td>
<mt:CalendarIfContents>
<$mt:CalendarDay$>
</mt:CalendarIfContents>
<mt:CalendarIfNoContents>
<$mt:CalendarDay$>
</mt:CalendarIfNoContents>
</td>
<mt:CalendarWeekFooter>
</tr>
</mt:CalendarWeekFooter>
</mt:ContentCalendar>
</tbody>
</table>
<!-- 出力結果 -->
<table>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<!-- 9〜22日までのHTMLを省略 -->
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td></td>
</tr>
</tbody>
</table>
MTCalendarWeekFooter
週の終わりのときに実行する条件タグ。1行が7日ずつの表組カレンダーにおいて、tr
の閉じタグの出力などに利用できる。
コードサンプルは上記MTCalendarWeekHeader
参照。
公式リファレンス
MT
- https://www.movabletype.jp/documentation/appendices/tags/calendar.html
- https://www.movabletype.jp/documentation/appendices/tags/contentcalendar.html
- https://www.movabletype.jp/documentation/dict/calendar/MTContentCalendar.html
Discussion