📃

【Movable Type】カレンダー機能を利用する

2025/02/05に公開

Web

frontend

Movable Type

tech

 概要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ひと月分のカレンダーを表示するためのブロックタグ。
!このブロックタグの直下に含まれるMTIfやMTUnlessは実行されないようです。以下のように書いた場合、MTIfの中身は処理されず、出力されません。
<!-- 直下のMTIfは処理されない -->
<mt:MTContentCalendar month="$catendarMonth">
  <mt:If name="__first__">
    <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:If>
  <!-- 表示内容（省略） -->
  <mt:If name="__last__">
      </tbody>
    </table>
  </mt:If>
</mt:MTContentCalendar>

 month表示するカレンダーの月を指定する。指定できる値はいくつかあるが、通常のカレンダーであればYYYYMMを指定でOK。

 content_typeMTContentCalendarを利用する場合、対象となるコンテンツタイプの以下いずれかを指定する。指定は必須。
コンテンツタイプID
コンテンツタイプ名
コンテンツタイプ ユニークID

 category値に指定したカテゴリ名のカレンダーを出力する。

コンテンツタイプの場合は、category_set（値はIDまたはカテゴリセット名）も併せて指定する必要がある。

 MTCalendarIfEntries / MTCalendarIfContents表示される記事やコンテンツデータがある場合に処理される条件タグ。
!このタグの中ではMTElseは利用できません（テンプレート生成時エラーになります）

表示される記事やコンテンツデータがない場合の記述は、MTCalendarIfNoEntriesあるいはMTCalendarIfNoContentsを利用します。
<!-- テンプレート生成時エラーになる -->
<mt:CalendarIfContents>
  <!--- doing --->
<mt:Else>
  <!--- doing --->
</mt:CalendarIfContents>

 MTCalendarIfNoEntries / MTCalendarIfNoContents表示される記事やコンテンツデータがない場合に処理される条件タグ。

上記同様MTElseは利用できない。

 MTCalendarDayカレンダーの日付のみを出力する。MTCalendarIf~またはMTCalendarIfNo~の中で利用する。

日付以外も出力する場合は、MTCalendarDateを利用する。

 MTCalendarDateformatモディファイアを指定することで、カレンダーの日付以外に曜日などを出力できる。MTCalendarIf~またはMTCalendarIfNo~の中で利用する。

指定できる値は公式リファレンス参照。

 MTCalendarIfTodayMTCalendarあるいはMTContentCalendar内において、「今日の日付」の場合に処理される。
!ただし「今日の日付」であっても、テンプレートが再構築などで生成されなければ処理されません。

たとえば4日の出力にMTCalendarIfTodayでclass="today"を付与している場合、翌日の5日にテンプレートが再構築または動的に処理されなければ、class="today"は4日に付与されたままになります。

 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参照。

 公式リファレンス
 MThttps://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

 PowerCMShttps://www.powercms.jp/products/document/template-tags/calendar.html

概要

コード例

とりあえず覚えておくといいMTタグとモディファイア

MTCalendar / MTContentCalendar

month

content_type

category

MTCalendarIfEntries / MTCalendarIfContents

MTCalendarIfNoEntries / MTCalendarIfNoContents

MTCalendarDay

MTCalendarDate

MTCalendarIfToday

MTCalendarWeekHeader

MTCalendarWeekFooter

公式リファレンス

MT

PowerCMS

Discussion