XO Event Calendar ミニカレンダー

「XO Event Calendar プラグインのカレンダーで日付を中央に表示させたい」と要望があったので方法を紹介します。

ここで紹介するカレンダーは下記の仕様として「ミニカレンダー」と名付けておきます。

仕様

• スタイルでイベントを非表示にする。
• 日付を中央（水平および垂直）に表示する。
• 曜日の背景をグラデーション表示する。

画面イメージ

イベントを非表示にする

下記のスタイルで、イベントが非表示になります。

.xo-event-calendar .month-event,
.xo-event-calendar .month-event-space {
	display: none;
}

日付を中央揃えにする

下記のスタイルで、日付が中央揃えになります。

.xo-event-calendar table.xo-month .month-dayname td div,
.xo-event-calendar table.xo-month .month-week {
	line-height: 2.5em;
	height: 2.5em;
}
.xo-event-calendar table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}

曜日の背景をグラデーション表示する

下記のスタイルで、曜日の背景がグラデーション表示されます。

.xo-event-calendar table.xo-month thead tr {
	padding: .75em 1em;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

ミニカレンダー

上記を含め、まとめたのが下記のスタイルです。

テーマの style.css や [カスタマイズ] の [追加 CSS] 等に記述してください。

.xo-event-calendar {
	max-width: 24rem;
	margin: 0 auto;
}

.xo-event-calendar .month-event,
.xo-event-calendar .month-event-space {
	display: none;
}

.xo-event-calendar table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}
.xo-event-calendar table.xo-month .month-dayname td div,
.xo-event-calendar table.xo-month .month-week {
	line-height: 2.5em;
	height: 2.5em;
}

.xo-event-calendar table.xo-month thead tr {
	padding: .75em 1em;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}