XO Event Calendar カレンダーの曜日名

XO Event Calendar プラグインのカレンダーに表示される曜日の文字を変更する方法を紹介します。

PHP コード

現バージョンでは、専用のフィルターフックや設定を用意してはいないのですが、文字列はすべて gettext を使用しているので gettext フィルターフックで変更することは可能です。

例えば、曜日を “Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri’ および “Sat” へ変更する場合は、下記のようなコードになります。

テーマの functions.php 等に記述してください。

function my_gettext_calendar( $translated, $text, $domain ) {
	if ( $domain === 'xo-event-calendar' ) {
		$texts = array (
			'Sun' => 'Sun',
			'Mon' => 'Mon',
			'Tue' => 'Tue',
			'Wed' => 'Wed',
			'Thu' => 'Thu',
			'Fri' => 'Fri',
			'Sat' => 'Sat',
		);
		if ( isset( $texts[$text] ) ) {
			$translated = $texts[$text];
		}
	}
	return $translated;
}

add_filter( 'gettext', 'my_gettext_calendar', 10, 3 );

スタイルシート (CSS)

スタイルシート (CSS) で変更する場合は、下記のようなスタイルシートになります。

.xo-month thead { font-size: 0; }
.xo-month thead th:before { font-size: 20px; }
.xo-month th.sunday:before { content: "Sun"; }
.xo-month th.monday:before { content: "Mon"; }
.xo-month th.tuesday:before { content: "Tue"; }
.xo-month th.wednesday:before { content: "Wed"; }
.xo-month th.thursday:before { content: "Thu"; }
.xo-month th.friday:before { content: "Fri"; }
.xo-month th.saturday:before { content: "Sat"; }

コメント

  • とても参考になりました。
    ちなみにカレンダーの上部の2021年3月の箇所をCSSで英語表記に変更するにはどのようにすればいいですか?

    • こんにちは、プラグインのご利用ありがとうございます。
      CSS だけで英語表記に変更することは難しいです。テーマの functions.php にコードを追加することになります。

      例:
      function my_event_calendar_month_caption( $caption, $args, $month_index ) {
      $months = array( 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' );
      $caption = sprintf( '%1$s %2$s', $months[$args['month'] - 1], $args['year'] );
      return $caption;
      }
      add_filter( 'xo_event_calendar_month_caption', 'my_event_calendar_month_caption', 10, 3 );

      下記ページが参考になると思います。
      https://xakuro.com/wordpress/xo-event-calendar/xo-event-calendar-month-caption/

  • こんにちは、またご指導いただければと、、、
    カレンダーの当日の文字色と背景色を変更したいのですが、どのようにすればいいでしょうか?

    • 当日には today クラスが付与されているので、下記のような CSS で変更できると思います。
      例:
      .xo-event-calendar .today {
      color: #fff;
      background-color: #000;
      }

      • 教えられたとおりcssをいじってみましたが
        変更になりませんでした。
        他に試すことはありますでしょうか?

  • 度々すみません。
    なんとか背景色は変更出来ましたが
    文字色が変わりません。
    なにか方法はありますか?

    • !important を付けてみてはどうでしょうか。
      .xo-event-calendar .today {
      color: #fff !important;
      background-color: #000;
      }

  • こんにちは 
    カレンダーの日曜日に当たる日付部分の文字色を変更したいのですが、こちら変更可能であるかご存知でしょうか?
    (例えば今月であれば9月の4日、11日、18日、25日など)
    また祝日も日付部分の文字色を変更したいのですが指定の日付のみ変更することはできるのでしょうか?
    もしお分かりであればご教授いただけますと幸いです。

    • はじめまして、こんにちは。
      休日設定で日曜日と祝日を指定し CSS で文字色を指定するのはどうでしょうか。

      例: 休日設定の名前を「all」とした場合の CSS の例です。

      .xo-event-calendar .holiday-all {
      	color: #d00;
      }
  • ありがとうございます!!こちらの方法で実装することができました!!

  • お手間おかけします。
    毎週金曜日に定期的にイベントを入力したいのですが、全ての金曜日のbgcolorを特定の色に変え、定型文字を例えば「特別メニューデー」とする場合はどのように追加cssを入れればよいでしょうか?

    • はじめまして、こんにちは。
      > 毎週金曜日に定期的に・・・
      現状のバージョンでは、定期的なイベントを設定することはできません。
      毎週金曜日であれば下記のような CSS で表示だけはできると思います。

      .xo-event-calendar .xo-month > tbody > tr td:nth-child(6) > div::after {
      	content: "特別メニューデー";
      	display: block;
      	font-size: 12px;
      	text-align: left;
      	color: white;
      	background-color: darkgreen;
      	border-radius: 3px;
      }

コメントを残す

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

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