XO Event Calendar 年間カレンダー

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

※ このカスタマイズと同等の機能が、バージョン3.0.0より追加されました。

ショートコード

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 */」以降は不要です。

追記

バージョン2.4.5より、ブロックの設定で年月の書式を指定できるようになりました。

コメント

  • こんにちは。まず第一に、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 );
          • 何度もご丁寧にお返事していただけて大変感謝しております。
            本当に助かりました!
            これからも応援させていただきます。

  • お世話になっております。
    以前教えていただきました方法でとても理想的なものになりました。
    本当にありがとうございます。

    質問がございます。
    カレンダーの中にA,B,Cとカテゴリーが登録されている場合、そのままA,B,Cの順に表示をされるようにしたいです。
    C,A,BやB,C,Aなどではなく、必ずA,B,Cに。

    登録順になっているようでfunctions.phpにカスタマイズを記載してみましたが、希望の順位に出来ません。
    順序を変えるプラグインを入れると、何故かデータが消えてしまうことがあるためプラグインを入れる方法以外で対応を教えていただけますと幸いです。

    よろしくお願いいたします。

    • こんにちは
      カレンダーの中のカテゴリーとはどこでしょうか?イベントの背景色のことでしょうか?

      • ご返答いただきましてありがとうございます。
        また、私の説明が拙くて申し訳ございません。
        カレンダー内で該当の日程に付随したイベント(カテゴリー)背景色が表示されておりますが、日程内でカテゴリー順に表示することは出来ないでしょうか。
        こちらはカテゴリーは関係なく、登録順で日程内で表示されるのでしょうか。
        ご回答の程よろしくお願いいたします。

        • カレンダー内の同日のイベントの表示順はイベントの開始時間順です。
          カテゴリー順にするには pre_get_posts や posts_orderby フックなどを使用して変更することになると思います。

          • 取り急ぎ、サンプルコードを書いてみました。あくまでもサンプルコードなので参考程度にお考えください。

            add_filter( 'posts_fields', function( $fields, $query ) {
            	if ( 'xo_event' === $query->get( 'post_type' ) ) {
            		$fields .= ',wp_terms.name';
            	}
            	return $fields;
            }, 10, 2 );
            
            add_filter( 'posts_join', function( $join, $query ) {
            	if ( 'xo_event' === $query->get( 'post_type' ) ) {
            		$join .= ' INNER JOIN wp_term_relationships ON (wp_posts.ID = wp_term_relationships.object_id) INNER JOIN wp_term_taxonomy AS tt1 ON ( tt1.term_taxonomy_id = wp_term_relationships.term_taxonomy_id ) INNER JOIN wp_terms ON ( tt1.term_id = wp_terms.term_id )';
            	}
            	return $join;
            }, 10, 2 );
            
            add_filter( 'posts_orderby', function( $orderby, $query ) {
            	if ( 'xo_event' === $query->get( 'post_type' ) ) {
            		$orderby = "wp_terms.name ASC";
            	}
            	return $orderby;
            }, 10, 2 );
  • はじめまして
    前任者が Excel → PDF → GIF で作成した年間カレンダーをアップしていて、もっとスマートにしたく、こちらを見つけてさっそく利用させていただきました。
    ありがとうございます。

    一つ質問なのですが、holiday-title の休日の色の説明部分を 1月の上にも表示する事は可能でしょうか?

    • はじめまして、こんにちは。
      PHP コードを追加しても良いのであれば、ショートコードで休日の色の説明部分を表示するのはどうでしょうか。

      テーマの functions.php に、

      add_shortcode( 'xo_event_holiday_titles', function( $attr ) {
      	$args = shortcode_atts( array(
      		'holidays' => 'all',
      	), $attr );
      
      	$html = '<div class="xo-event-calendar"><div class="holiday-titles" >';
      	$holiday_settings = get_option( 'xo_event_calendar_holiday_settings' );
      	if ( $holiday_settings ) {
      		$holidays = explode( ',', $args['holidays'] );
      		foreach ( $holidays as $holiday ) {
      			if ( array_key_exists( $holiday, $holiday_settings ) ) {
      				$html .= "<p class=\"holiday-title\"><span style=\"background-color: {$holiday_settings[$holiday]['color']};\"></span>{$holiday_settings[$holiday]['title']}</p>";
      			}
      		}
      	}
      	$html .= '</div></div>';
      
      	return $html;
      } );

      使用例:

      [xo_event_holiday_titles holidays="all"]
      • 石鷹様
        素早いご回答ありがとうございます。
        ばっちりいけました!
        教えていただいたコードも理解でき、すごく勉強になりました。
        ありがとうございました!

  • いつも利用させて頂いています!とても良いプラグインをありがとうございます。
    年間カレンダーとして表示しようとしたところ、その場合は設定した「ショートタイトル」が非表示(コードそのものにも出力されていない)のですが、こちらを通常のカレンダー同様に出力させることは可能でしょうか。
    自力で解決出来ず、コメントで恐縮ですが助言頂けますと幸いです。

    • こんにちは
      ショートコードのオプションで非表示に設定していませんか?
      下記のように event オプションで false を指定すると表示されません。このオプションを削除してみてください。
      event="false"
      なお、このページのカスタマイズは、イベントブロックとして現バージョンのプラグインに実装されています。イベントブロックを使用することで設定も簡単にできるのでブロックの方をお試しください。

コメントを残す

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

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