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;
}

コメント

  • お世話になります。試用させていただきました。
    スマホでフッタに1か月ずつ100%表示されるので
    追加CSSで幅調整しましたが上手くいきません。
    スマホで横2列表示(全体的に小さく)表示する方法をお知らせいただけると助かります。
    どうぞ、よろしくお願いいたします。

    • こんにちは

      こちらの記事の CSS が参考になると思います。
      例:
      @media (max-width: 768px) {
      .xo-event-calendar .xo-months {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 15px;
      row-gap: 5px;
      }
      }

      ※ 768px は適当に調整してください。

  • お世話になっております。素晴らしいプラグインをありがとうございます。
    休日の名前を複数表示するときに、横並びにすることは可能でしょうか?
    お忙しいとは思いますが宜しくお願いします。

    • こんにちは、コメントありがとうございます。
      下記 CSS はどうでしょうか?
      .xo-event-calendar p.holiday-title { display: inline-block; margin-right: 24px; }

      • なるほど!そうですよね!ありがとうございます。お手数をおかけしました。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。(スパム対策)