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

コメントを残す

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

日本語でコメントを入力してください。