Movabletype7でイベントカレンダー

らら
らら

はじめに

Data APIで使用できるようですが、今回は、Movabletype7のコンテンツデータを使ってみます。

あと、jQuery版FullCalendar Ver3を使用します。それ以外のjavascriptのものでも使用できると思います。

参考

Movabletypeコンテンツデータ

記事
https://www.omakase.net/blog/2022/11/movabletypecontent.html

Movabletypeコンテンツデータ２

記事
https://www.omakase.net/blog/2023/02/movabletypecontent2.html

FullCalendarについて

記事
https://www.omakase.net/blog/2023/03/fullcalendar.html

方法

まずカテゴリを作ります。

これは、イベントの色分けに使用します。

あと、アーカイブリストで月単位・カテゴリ単位など作成するとリスト化できるので。

Movabletype7でイベントカレンダー

あとからMTタグで使用するので、MTタグと対比は下記です。

Movabletype7でイベントカレンダー


<mt:CategoryLabel>
<mt:CategoryBasename>

コンテンツタイプを作成します。こんな感じ

FullCalendarで使用できるように項目を準備します。一応詳細用にWYSIWYGで内容も準備しておきます、

Movabletype7でイベントカレンダー

FullCalendarで連動用

FullCalendarで連動できるように、デザインのテンプレートでJSのデータを作成します。

Movabletype7でイベントカレンダー

追加した感じ

ファイル名はevents.js。パスを指定したい場合ここでパス指定します。

javascriptで使用する変数はeventsで、ここを変更する場合はご自由に・・・

Movabletype7でイベントカレンダー

ここでは全件作成するサンプルですが、javascriptで表示する手前limit(コンテンツタイプではlastnは使えません)で最新のXX件って指定しておくことで

数年後重いとかないかと、カレンダーは、最新のXX件分しか表示しませんなどで対応を。。。

ここで種別の色を指定しているので・・・・カテゴリ増えたら。。追加が必要です。。はい・・

ここでコンテンツタイプにイベント終了など追加して色替えなどもお好みで！

最新の100件・・


<mt:Contents content_type="イベントカレンダー" limit="100">


var events = [
<mt:Contents content_type="イベントカレンダー">
<mt:Var name="class" value="">
<mt:ContentField content_field="種別"><mt:CategoryBasename setvar="class"></mt:ContentField>
<mt:If name="class" eq="event1">
<mt:setvarblock name="color">#ff0000</mt:setvarblock>
<mt:mt:ElseIf name="class" eq="event2">
<mt:setvarblock name="color">#0000ff</mt:setvarblock>
<mt:Else>
</mt:If>
{title: '<mt:ContentField content_field="イベント名"><mt:ContentFieldValue></mt:ContentField>',start: '<mt:ContentField content_field="開始日時"><mt:ContentFieldValue  format="%Y-%m-%dT%H:%M:%S"$></mt:ContentField>',end: '<mt:ContentField content_field="終了日時"><mt:ContentFieldValue format="%Y-%m-%dT%H:%M:%S"$></mt:ContentField>',url:'<mt:ContentPermalink>',color:'<mt:Var name="color">'},
</mt:Contents>
];

出来上がるとこんな感じ


var events = [
{title: 'イベントだよ',start: '2023-02-14T12:00:00',end: '2023-02-18T15:00:00',url:'サーバーURL/2023/02/14/event.html',color:'#ff0000'},
];

イベントカレンダーの詳細

上記の参考のURLを参照してください。

アーカイブマッピングはお好みで、指定しないとHTMLできませんよ。

カスタムを選択してパスは下記みたいな感じで


event/%y/%m/%-f

詳細ページを作るには、コンテンツタイプアーカイブで作成します。

お好みで月別、カテゴリ別も同様に作ります。

月別の日付は、デフォルトは公開日ですので、公開日単位のアーカイブになります。イベント開始日ではないので注意してください。

イベント開始日にする場合は、別途設定が必要です。

Movabletype7でイベントカレンダー


	<p><mt:ContentField content_field="イベント名"><mt:ContentFieldValue></mt:ContentField></p>
	<p><mt:ContentField content_field="種別"><mt:CategoryLabel></mt:ContentField></p>
	<p><mt:ContentField content_field="開始日時"><mt:ContentFieldValue></mt:ContentField></p>
	<p><mt:ContentField content_field="終了日時"><mt:ContentFieldValue></mt:ContentField></p>
	<p><mt:ContentField content_field="内容"><mt:ContentFieldValue></mt:ContentField></p>

コンテンツデータでデータを作ります。

Movabletype7でイベントカレンダー

これで一通り準備完了です。

番外編

参考URLでも説明していますが・・

コンテンツタイプアーカイブリスト（年、カテゴリ）

下記で新規して。

Movabletype7でイベントカレンダー

先にカテゴリ別アーカイブを作る


event/%-c/%i


<mt:Contents content_type="イベントカレンダー ">
	<p><mt:ContentField content_field="開始日時"><mt:ContentFieldValue></mt:ContentField></p>
	<p><mt:ContentField content_field="イベント名"><mt:ContentFieldValue></mt:ContentField></p>
	<p><mt:ContentField content_field="種別"><a href="<mt:CategoryArchiveLink>" class="label category text-xsmaller"><mt:CategoryLabel></a></mt:ContentField></p>
	<p><a href="<mt:ContentPermaLink>">詳細</a></p>
</mt:Contents>

Movabletype7でイベントカレンダー

次に年別アーカイブを作る

Movabletype7でイベントカレンダー


event/%y/%i

Movabletype7でイベントカレンダー

カテゴリリストをつけたい場合は・・・


<mt:CategorySets content_type="イベントカレンダー">
	<mt:ArchiveList type="ContentType-Category">
		<mt:ArchiveListHeader>
		<section>
			<div><mt:CategorySetName></div>
			<ul>
		</mt:ArchiveListHeader>
				<li><a href="<mt:ArchiveLink>"><mt:ArchiveTitle></a></li>
		<mt:ArchiveListFooter>
			</ul>
		</section>
		</mt:ArchiveListFooter>
	</mt:ArchiveList>
</mt:CategorySets>

年別リストをつけたい場合は・・・


<mt:ArchiveList type="ContentType-Yearly" content_type="イベントカレンダー">
	<mt:ArchiveListHeader>
		<section>
			<div>年別アーカイブ</div>
			<ul>
	</mt:ArchiveListHeader>
				<li><a href="<mt:ArchiveLink>"><mt:ArchiveTitle></a></li>
	<mt:ArchiveListFooter>
			</ul>
		</section>
	</mt:ArchiveListFooter>
</mt:ArchiveList>

FullCalendar Ver3系を設定します。

FullCalendarのdemos\background-events.htmlをサンプルにします。

HTMLはこんな感じ

日本語化して、下記を追加します。

ここのパスは、Movabletypeで指定したパスを使用します。


<script src='../../events.js'></script>

上記の部分は、キャッシュされるのでとか。MTに組み込む場合は・・


<$mt:Date format="%Y%m%d"$ setvar="nowdate">
<script src='../../events.js?<mt:Var name="nowdate">'></script>

JSでやりたい兄貴は・・こんな感じで


<script>
$(function(){
	var js_pth = '../../events.js?'+Math.random();
	include(js_pth);
	function include(astrFile)
	{
		var script = document.createElement('script');
		script.src = astrFile;
		script.type = 'text/javascript';
		script.defer = true;
		document.getElementsByTagName('head').item(0).appendChild(script);
	}
});
</script>

次に下記の部分

eventsのeventsになってしまっていますが、右側の名前がMovabletypeで作成したものの名前です。


      events: events

defaultDateはコメントにして現在日で表示にしています。


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='../../events.js'></script>
<script src='../locale-all.js'></script>
<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      locale:'ja',
      navLinks: true, // can click day/week names to navigate views
      events: events
    });
});
</script>
<style>
  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }
  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div id='calendar'></div>
</body>
</html>

こんな感じ・・まぁ。FullCalendarの機能です。はい。

クリックすると作成したMovabletypeで作成した詳細ページに飛びます。

Movabletype7でイベントカレンダー

Movabletype7でイベントカレンダー

Movabletype7でイベントカレンダー

あとは、上記のHTMLをMTの表示した場所にテンプレートで組み込みすれば完了です。

月別アーカイブ等の公開日単位の変更について

アーカイブしたい日付形式の項目を必須にします。カテゴリもアーカイブする場合も同様です。

Movabletype7でイベントカレンダー

アーカイブマッピングの日付と時刻フィールド選択できるようになるので設定します。

Movabletype7でイベントカレンダー

これは、記事の時、カスタムフィールドにはなかったから何気に便利・・コンテンツデータからの機能です。

さいごに・・

コンテンツデータ便利ですよね・・スライダーとか、バナー管理、商品登録、関連企業登録とか・・・

関連記事