• HOME
  • BLOG
  • XO Event Calendar ミニカレンダー

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

コメント

  • お世話になります。試用させていただきました。
    スマホでフッタに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; }

      返信

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

        返信

  • はじめまして、大変便利に使わせていただいております。
    ミニカレンダーで月名の表示を”December 2023″のような形から”12月”のみに変更したい場合、title_formatを変更することで行うことはできますか？
    その場合、どのように記載すればよろしいか教えていただけませんでしょうか？
    お忙しいところ恐れ入りますがよろしくお願いいたします。

    返信

    • はじめまして、こんにちは。
      はい、title_format で変更できます。title_format で “F” を指定してください。
      ショートコードの例:
      [xo_event_calendar title_format="F"]
      カレンダー ブロックの場合:
      Screenshot Simple Block

      返信

      • できました。ご丁寧に教えてくださってどうもありがとうございます。
        かゆいところに手が届くプラグインで本当に助かっております。

        返信

  • こんにちは、はじめまして。とても便利にありがたく使わせていただいております。ひとつ質問させてください。
    サイトの背景色がブラックのときウィジェットのミニカレンダーで日付や矢印が見えなくなってしまうので白に変更したいのですがCSSはどのようになりますでしょうか。初心者の質問かと思いますがよろしければご教授いただければ幸いです。

    返信

    • はじめまして、こんにちは。
      下記のような CSS で、カレンダーのタイトル、月送りの矢印およびカレンダーの日付が白色になると思います。
      反映されない場合は !important など付けてみてください。

      .xo-event-calendar table {
	color: #fff;
}
.xo-event-calendar .dashicons {
	color: #fff;
}
.xo-event-calendar table.xo-month button span.nav-prev,
.xo-event-calendar table.xo-month button span.nav-next {
	border-color: #fff;
}
      返信

  • どうもありがとうございます。
    しかしカレンダーの数字の色もセットで白くなってしまいました。なのでカレンダーの背景を黒くする方法などはございますでしょうか、何度も申し訳ございません

    返信

  • 失礼しました、背景を黒くすると曜日が見えなくなるなど弊害がでてしまうかもですのでいろいろ模索してみます。

    返信

  • 休日設定に平日の色を付けることで解決いたしました。本当にありがとうございます。

    返信

コメントを残す

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

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