XO Event Calendar 年間カレンダー

XO Event Calendar プラグインにて、年間休日カレンダーのようなものを表示する例を紹介します。

ショートコード

xo_event_calendar ショートコードで、年 (year)、月 (month) および月数 (months) パラメーターを指定します。例では、年間カレンダー用のスタイルを適用させるために ID で “calendar-year” を指定しています。

例:

[xo_event_calendar id="calendar-year" year="2018" month="1" months="12" event="false" navigation="false" holidays="all"]

表示のカスタマイズ

スタイルで、年間カレンダーに適した表示にします。

具体的には、日付のセンタリング、前後月の日付を削除、今日の強調表示をしない、年表示をしない、PC の場合は3列表示にします。

スタイル (CSS)

/*
Calendar Year
*/
#calendar-year .xo-months {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 15px;
	row-gap: 5px;
}
#calendar-year .month-event,
#calendar-year .month-event-space {
	display: none;
}
#calendar-year .other-month {
	display:none;
}
#calendar-year table.xo-month .month-dayname td div,
#calendar-year table.xo-month .month-week,
#calendar-year table.xo-month thead {
	line-height: 1.5em;
	height: 1.5em;
}
#calendar-year table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}
#calendar-year .xo-event-calendar table.xo-month .month-dayname td div,
#calendar-year .xo-event-calendar table.xo-month .month-dayname td div.today {
	color: #333;
	font-weight: normal;
}

@media (max-width: 768px) {
	#calendar-year .xo-months {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* Calendar caption */
#calendar-year .xo-month .month-header span.calendar-caption {
	font-size: 0;
}
#calendar-year .xo-month .month-header span.calendar-caption:before {
	font-size: 20px;
}
#calendar-year .xo-month-wrap:nth-child(1) table.xo-month .month-header span.calendar-caption:before {
	content: "1月";
}
#calendar-year .xo-month-wrap:nth-child(2) table.xo-month .month-header span.calendar-caption:before {
	content: "2月";
}
#calendar-year .xo-month-wrap:nth-child(3) table.xo-month .month-header span.calendar-caption:before {
	content: "3月";
}
#calendar-year .xo-month-wrap:nth-child(4) table.xo-month .month-header span.calendar-caption:before {
	content: "4月";
}
#calendar-year .xo-month-wrap:nth-child(5) table.xo-month .month-header span.calendar-caption:before {
	content: "5月";
}
#calendar-year .xo-month-wrap:nth-child(6) table.xo-month .month-header span.calendar-caption:before {
	content: "6月";
}
#calendar-year .xo-month-wrap:nth-child(7) table.xo-month .month-header span.calendar-caption:before {
	content: "7月";
}
#calendar-year .xo-month-wrap:nth-child(8) table.xo-month .month-header span.calendar-caption:before {
	content: "8月";
}
#calendar-year .xo-month-wrap:nth-child(9) table.xo-month .month-header span.calendar-caption:before {
	content: "9月";
}
#calendar-year .xo-month-wrap:nth-child(10) table.xo-month .month-header span.calendar-caption:before {
	content: "10月";
}
#calendar-year .xo-month-wrap:nth-child(11) table.xo-month .month-header span.calendar-caption:before {
	content: "11月";
}
#calendar-year .xo-month-wrap:nth-child(12) table.xo-month .month-header span.calendar-caption:before {
	content: "12月";
}

PHP コードによる年月の変更

前セクションのスタイル (「/* Calendar caption */」以降) は、開始月が１月であることを前提にしています。

これでは汎用的ではないので、gettext_with_context フィルターフックを使用して変更する方法も紹介しておきます。

下記コードを、functions.php に追加することで月のみ表示されるようになります。

functions.php

function my_gettext_with_context_calendar( $translation, $text, $context, $domain ) {
	if ( $domain == 'xo-event-calendar' && $context == 'calendar caption' && $text == '%1$s %2$s' ) {
		$translation = '%1$s';
	}
	return $translation;
}

add_filter( 'gettext_with_context', 'my_gettext_with_context_calendar', 10, 4 );

※ このコードを追加した場合は、スタイルの「/* Calendar caption */」以降は不要です。