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

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

コメント

  • とても参考になりました。
    ちなみにカレンダーの上部の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;
      }

      返信

  • こんにちは　
    カレンダーの日曜日に当たる日付部分の文字色を変更したいのですが、こちら変更可能であるかご存知でしょうか？
    （例えば今月であれば９月の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;
}
      返信

  • 以前より、このプラグインを利用させていただいています。
    最近になり、wordpress自体の再構築をしようとしておりまして、 wordpress6.7をインストール直後に、デフォルトのテーマ Twenty Twenty-Five を選択し、言語設定は日本語に設定後に、 固定ページにXO_EVENTカレンダーのブロックを配置してあります。
    その固定ページに アクセスすると、どうしても、カレンダーの題目と曜日の部分が、「November 2024　S M T W T F S」で表示されてしまい困っております。
    「>」にて、次の月に移動すると、正しく日本語が表示されますし、「<」にて 11月に戻ってくると、正しく日本語が表示されます。
    しかし、F5などでブラウザをリロードすると、やはりどうしても、最初だけ英語になってしまうのですが、最初から日本語で表示されるようにする方法はないものなのでしょうか。 サーバーは almalinuxで、PHP8.3で利用しています。

    返信

    • 自己解決しました。
      どうしても、だめだったので、以下のようなコードをfuncition.phpに記載しました。お騒がせいたしました。

      function my_event_calendar_month( $html, $args, $month_index, $events ) {

      if($html){
      $html = str_replace(‘SMTWTFS’,’日月火水木金土’,$html);
      }

      return $html;
      }
      add_filter( ‘xo_event_calendar_month’, ‘my_event_calendar_month’, 10, 4 );

      返信

  • すみません。HTMLが エスケープされたために、正しいコードになっていません。が、生成されるHTMLのタグを含めて、str_replaceで入れ替えたような形で対処しました。

    返信

コメントを残す

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

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