「カレンダー」ウィジェットの土日・祝日に色を付ける方法

はじめに
完成イメージ
実装手順
- JavaScriptで実装する場合
- PHPで実装する場合
さいごに

はじめに

「カレンダー」ウィジェットでは、土日・祝日に色付けされません。

そこで、土日・祝日に自動で色を付けします。

この記事では、この方法について説明します。

JP Holiday API

完成イメージ

2026-10
月	火	水	木	金	土	日
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

実装手順

JavaScriptで実装する場合

以下の手順で実装します。

ラベル

JavaScriptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  const $table = $('.wp-calendar-table');

  // 年月を取得
  const m = $table.find('caption').text().match(/(\d{4})\D+(\d{1,2})/);
  if (!m) return;

  const year  = m[1];
  const month = m[2].padStart(2, '0');

  // 祝日を取得
  $.getJSON(`https://jp-holiday.net/api/v1/list/${year}`, function (data) {
    const holidays = Object.keys(data);

    // 日付セルを設定
    $table.find('td').each(function () {
      const $td = $(this);
      const day = $td.text().trim();

      if (!/^\d+$/.test(day)) {
        return;
      }

      // 年月日を設定
      const date = `${year}-${month}-${day.padStart(2, '0')}`;
      const week = new Date(date).getDay();

      // 曜日と祝日を設定
      $td.toggleClass('sunday', week === 0)
         .toggleClass('saturday', week === 6)
         .toggleClass('holiday', holidays.includes(date));
    });
  });
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.wp-calendar-table td {
  &.holiday,
  &.sunday {
    background-color: #ffe6e6;
  }

  &.saturday {
    background-color: #e6f0ff;
  }
}

PHPで実装する場合

以下のコードをfunctions.phpに追加します。

add_filter('get_calendar', function ($html) {

  // 年月を取得
  if (!preg_match('/<caption[^>]*>\D*(\d{4})\D+(\d{1,2})/', $html, $c)) {
    return $html;
  }

  $year  = $c[1];
  $month = sprintf('%02d', $c[2]);

  // 祝日キャッシュを取得
  $key      = "calendar_holidays_{$year}";
  $holidays = get_transient($key);

  // 祝日を取得
  if (false === $holidays) {
    $res  = wp_remote_get("https://jp-holiday.net/api/v1/list/{$year}");
    $data = json_decode(wp_remote_retrieve_body($res), true);

    // 祝日の日付を取得
    $holidays = is_array($data) ? array_keys($data) : [];

    // 祝日をキャッシュ
    set_transient($key, $holidays, $holidays ? DAY_IN_SECONDS : HOUR_IN_SECONDS);
  }

  // 日付セルを置換
  return preg_replace_callback(
    '#<td([^>]*)>((?:<a [^>]*>)?)(\d{1,2})<#',
    function ($m) use ($year, $month, $holidays) {

      // 年月日を設定
      $date = sprintf('%s-%s-%02d', $year, $month, $m[3]);

      // 曜日を取得
      $week = (int) (new DateTime($date))->format('w');

      // クラスを設定
      $classes = array_filter([
        [0 => 'sunday', 6 => 'saturday'][$week] ?? '',
        in_array($date, $holidays, true) ? 'holiday' : '',
      ]);

      // 処理対象外
      if (!$classes) {
        return $m[0];
      }

      // クラスを設定
      return '<td class="' . implode(' ', $classes) . '"' . $m[1] . '>' . $m[2] . $m[3] . '<';
    },
    $html
  );
});

さいごに

今回紹介した方法を使えば、「カレンダー」ウィジェットに土日や祝日を視覚的にわかりやすく表示することができます。
祝日データは外部APIから取得され、常に最新の情報が反映されるため、手動で更新する手間も不要です。