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 */」以降) は、開始月が1月であることを前提にしています。

これでは汎用的ではないので、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 */」以降は不要です。

コメント

  • こんにちは。まず第一に、XO Event Calendarプラグインで行われたすべての作業に感謝します。このプラグインは、ミニマリストであると同時に、使いやすく、充実した機能を備えています。これは、限られたサーバーリソースを持っているときには非常に興味深いものです。

    PS: deepl.comで翻訳

    私はそれが可能かどうかを知りたいのですが、このプラグインで年間形式(数ヶ月)でナビゲーションを追加することは可能ですか?はいの場合は、どのように?

    もう一度あなたに感謝します。

    • こんにちは、コメントありがとうございます。

      月送りのナビゲーションは、ショートコードのパラメータで、
      navigation=”true”
      を指定することでできます。

      年送りはできません。年ごとのページを作成してリンクを貼ることになります。

      以上、よろしくお願いします。

  • なぜか、年間カレンダーの今日の強調表示のスタイルが反映されないのです。子ページのCSSでも反映されず、カスタマイズの追加CSSでも反映されず、固定ページのカスタムCSSでも反映されませんでした。
    他は、キレイに年間カレンダーの表示になっているんですが….。
    とりあえず、年間カレンダー表示のページのみ以下の設定で強調表示をしないようにしています。
    .xo-event-calendar table.xo-month .month-dayname td div.today {
    color: #333;
    font-weight: normal;
    }

    • はじめまして、こんにちは。コメントありがとうございます。
      CSS が間違えていました。
      #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;
      }


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

      ※ 「#calendar-year」と「.xo-event-calendar」の間のスペースが不要でした。本文の CSS は修正しました。
      お手数おかけしてすみません。m(__)m

      • ありがとうございました。
        休みの種類や臨時営業日など複数あり、今まで、年間カレンダーを画像表示していたのでこの年間カレンダーを利用できたことにより表示が速くなったのと、スマホ対応もできたのでとても助かります。

  • 初めましてこんにちは。
    XO Event Calendarが優れていてとても素敵なものをありがとうございます。
    こちらのページに書くか迷いましたが、質問させてください。
    前の月、次の月の日付を削除はCSSで可能なのは理解できました。
    ただ、イベントを表示するときに日付は消せますが前の月次の月のイベントは消すことができないです。
    こちらはどのようにすればご教授いただけないでしょうか。
    よろしくお願いいたします。

    • はじめまして、こんにちは。コメントありがとうございます。
      xo_event_calendar_events フィルターフック – Xakuro」ページのサンプルコードがそのものずばりだと思います。
      コード内の “xo-event-calendar-1” は実際の ID に変更してください。カレンダーがウィジェットの場合はページのソースで ID を確認することができます。

      > こちらのページに書くか迷いましたが、質問させてください。
      些細な事でもお気軽にコメントくださいませ (^^♪

      • 早急にお返事していただきましてありがとうございます。
        とても感謝しております。
        また何かあったときにご相談させてください。

      • たびたび申し訳ございません。
        イベントカレンダーの管理画面一覧でカテゴリーを複数チェックしたときに、管理画面一覧では1つのカテゴリーしか表示されないです。
        こちらはチェックしたものを全て表示にならないでしょうか。
        ご教授いただけますと幸いです。
        よろしくお願いいたします。

        • 将来のバージョンで対応したいと思います。
          それまでは、下記コードで暫定的に対応してもらえればと思います。

          add_action( 'manage_xo_event_posts_custom_column', function( $column_name, $post_id ) {
          	if ( 'category' === $column_name ) {
          		$cats = get_the_terms( $post_id, 'xo_event_cat' );
          		if ( $cats && ! is_wp_error( $cats ) ) {
          			foreach ( $cats as $key => $cat ) {
          				if ( 0 === $key ) continue;
          				echo ', ' . esc_html( $cat->name );
          			}
          		}
          	}
          }, 11, 2 );
          • 何度もご丁寧にお返事していただけて大変感謝しております。
            本当に助かりました!
            これからも応援させていただきます。

コメントを残す

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

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