jQuery UI Datepickerのカレンダーを祝日対応する方法

jQuery UI Datepickerのカレンダーを祝日対応する方法

jQuery UI Datepickerのカレンダーを祝日対応する方法

フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」ですが、表示されるカレンダーは祝日に対応していません。

日曜日と祝日の色を変えたいという要望があり、カレンダーに日本の祝日を反映させて対応したので、備忘録として残しておきたいと思います。

jQuery UI Datepickerのカレンダーに祝日を反映させる方法

祝日の情報は、Holidays JP APIを使って取得します。Holidays JP APIは祝日のデータを返してくれるAPIで、祝日のデータはGoogleカレンダーの情報から自動で生成されます。

Holidays JP APIで取得した祝日の情報をjQuery UI Datepickerのカレンダーに反映させます。

具体的には、以下のようにスクリプトを記述します。

※jQuery UI Datepickerの導入手順については、こちらの記事をご参照ください。

<script>
$.get('https://holidays-jp.github.io/api/v1/date.json', function(holidaysData) {
  $('#datepicker').datepicker({
    showOn: 'both',
    buttonImageOnly: true,
    beforeShowDay: function(date) { //祝日対応
      if (date.getDay() == 0) {
        return [true, 'is-sunday', null];
      } else if (date.getDay() == 6) {
        return [true, 'is-saturday', null];
      }
      var holidays = Object.keys(holidaysData);
      for (var i = 0; i < holidays.length; i++) {
        var holiday = new Date(Date.parse(holidays[i]));
        if (holiday.getYear() == date.getYear() &&
          holiday.getMonth() == date.getMonth() &&
          holiday.getDate() == date.getDate()) {
          return [true, 'is-holiday', null];
        }
      }
      return [true, 'is-weekday', null];
    }
  });
});
<script>

jQuery UI DatepickerのbeforeShowDayを使って、カレンダーを表示する時に平日・土曜日・日曜日・祝日のそれぞれにクラスを追加しています。

  • 平日:.is-weekday
  • 土曜日:.is-saturday
  • 日曜日:.is-sunday
  • 祝日:.is-holiday

例えば、日曜日・祝日の背景色は淡いピンク、土曜日の背景色は淡い青色にしたい場合は、以下のようにスタイルを追加してあげればOKです。

.is-sunday,
.is-holiday {
  background: #fff0f5;
}

.is-saturday {
  background: #f0f8ff;
}

あとがき

jQuery UI Datepickerでは、元々土曜日と日曜日には.ui-datepicker-week-endというクラスが追加されています。ですが、土曜日と日曜日の色を分けたいこともあると思います。:nth-of-typeを使って、無理やりスタイルを変えることはできますが、それぞれにクラスが付いていた方がわかりやすいですね。

jQuery UI Datepickerのカレンダーに祝日を反映させたい時は、ぜひ参考にしていただければ幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です