ContentCalendarつかってみた

らら
らら

はじめに

以前は、コンテンツデータとFullCalendarで構築しました。

今回は、mt:ContentCalendarを使うことに。。。

こちらでは、定期的に再構築しないといけなかったりするのであまり使用しないようにしていました。

対応

あまり再構築しないように。2年分をHTMLで出力しておき、JavaScriptで3か月分だけ表示みたいにしちゃえば

Movabletype7でイベントカレンダー

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

コンテンツタイプはこんな感じ

ContentCalendar

Movabletypeコード

３年分は。max_yearを2で。。あまり多いとHTMLコード量があれなので

現在は、再構築した時点の年から始めてます・・・

コードは本家からのコードをカスタマイズ・・

基本は、記事の時のmt:Calendarを変らないので、曜日の判定とかは、そのまま使えます。


<mt:SetVarBlock name="start_year"><mt:Date format="%Y"></mt:SetVarBlock>
<mt:Var name="start_year" setvar="max_year">
<mt:SetVar name="max_year" op="+" value="1">
<mt:For var="year_i" from="$start_year" to="$max_year">
	<mt:For var="month_i" from="1" to="12">
		<mt:SetVarBlock name="Calendar"><mt:Var name="year_i"><mt:Var name="month_i" zero_pad="2"></mt:SetVarBlock>
		<h3><mt:Date ts="$Calendar" format="%Y年%m月"></h3>
		<table id="cal_<mt:Var name="Calendar">">
			<tr>
				<th>日</th>
				<th>月</th>
				<th>火</th>
				<th>水</th>
				<th>木</th>
				<th>金</th>
				<th>土</th>
			</tr>
		<mt:ContentCalendar month="$Calendar" content_type="イベント" date_field="開催日時">
			<mt:CalendarWeekHeader>
			<tr>
		</mt:CalendarWeekHeader>
				<td>
			<mt:CalendarIfContents>
				<mt:SetVarBlock name="CalendarDate"><mt:Var name="year_i"><mt:Var name="month_i" zero_pad="2"><mt:CalendarDay zero_pad="2"></mt:SetVarBlock>
				<mt:If tag="CalendarDate" format="%w" eq="6">
					<p>satday</p>
				</mt:If>
				<mt:If tag="CalendarDate" format="%w" eq="0">
					<p>sunday<p>
				</mt:If>
				<mt:CalendarIfToday><strong></mt:CalendarIfToday><mt:CalendarDay><mt:CalendarIfToday></strong></mt:CalendarIfToday><br>
				<mt:Contents>
					<mt:ContentField content_field="イベント１"><mt:ContentFieldValue></mt:ContentField>
					<mt:ContentField content_field="イベント２"><mt:ContentFieldValue></mt:ContentField>
				</mt:Contents>
			</mt:CalendarIfContents>
			<mt:CalendarIfNoContents>
				<mt:SetVarBlock name="CalendarDate"><mt:Var name="year_i"><mt:Var name="month_i" zero_pad="2"><mt:CalendarDay zero_pad="2"></mt:SetVarBlock>
				<mt:If tag="CalendarDate" format="%w" eq="6">
					<p>satday</p>
				</mt:If>
				<mt:If tag="CalendarDate" format="%w" eq="0">
					<p>sunday<p>
				</mt:If>
				<mt:CalendarIfToday><strong></mt:CalendarIfToday><mt:CalendarDay><mt:CalendarIfToday></strong></mt:CalendarIfToday><br>No Events
			</mt:CalendarIfNoContents>
				</td>
			<mt:CalendarWeekFooter>
			</tr>
			</mt:CalendarWeekFooter>
		</mt:ContentCalendar>
		</table>
	</mt:For>
</mt:For>

JavaScriptで3か月分はこんな感じ・・

テストしてません。。


<script>
$(function(){
	var cmpdate = [];
	cmpdate[0] = caldateformat(0);
	cmpdate[1] = caldateformat(1);
	cmpdate[2] = caldateformat(2);
	var cals = $('[id^=cal_]');
	for(var cal of cals) {
		var cal_id = $(cal).attr('id');
		stArray = cal_id.split("_");
		for (var i = 0; i < cmpdate.length; i++) {
			if(stArray[1] == cmpdate[i]) {
				$(cal).addClass('active');
			}
		}
	}
function caldateformat(addmonth) {
	var nowdate	= new Date();
	nowdate.setMonth(nowdate.getMonth() + addmonth);
	var year	= nowdate.getFullYear();
	var month	= ("0"+(nowdate.getMonth() + 1)).slice(-2);
	var day		= ("0"+nowdate.getDate()).slice(-2);
	return year +""+ month;
}
});
</script>

format="%w"を format="%a"にすれば　Tueとかになるのでそのままclass名に使ってみては・・

さいごに

今月分、記事書いてなかったから・・慌てて・・・メモです。

関連記事