jQuery UI datepicker で土日、祝日の背景色を設定する方法の解説

jQuery UI datepicker で土日、祝日の背景色を設定する方法の解説
                 
最終更新日から90日以上経過しています。

手軽にカレンダーを表示できる jQuery UI datepicker ですが、土日、祝日を色分けして表示したいケースがありました。

やりたいこと(=完成系)はこんな感じ。

  • 土曜日:青
  • 日曜日:赤
  • 祝日:オレンジ

調べたら意外と簡単にできたのでシェアします。

書かないこと

jQuery、jQuery UIの導入については省略します。

手順

祝日の判定用ライブラリ取得

holiday_jp-js(GitHub) を使用して祝日を判定します。

npm でインストールする場合は、以下コマンド。

$ npm install @holiday-jp/holiday_jp

npmを使用しない場合は、コードをダウンロードして、releaseフォルダのholiday_jp.min.js を取得して、htmlで読み込みます。

今回はnpmを使用しないケースで記載。

祝日の判定用ライブラリ追加

以下ポイント

  • holiday_jp.min.js の読み込み(7行目)
  • jQuery系の読み込み(8行目〜11行目)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./holiday_jp.min.js"></script>
    <script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.theme.css">
    <script type="text/javascript" src="./main.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

土日の日付にclassを設定

jQuery ui datepicker の beforeShowDay を使って土日の日付にカスタムclassを設定します。

main.js

$(function () {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            if (date.getDay() === 0) {
                // 日曜日の場合
                return [true, "custom-calendar-sunday", ""];
            } else if (date.getDay() === 6) {
                // 土曜日の場合
                return [true, "custom-calendar-saturday", ""];
            }
            // 平日の場合
            return [true, "custom-calendar-weekday", ""];
        }
    });
});

土日の日付のclassにCSSを設定

設定したカスタムclassに対して背景色を設定します。

(正確にはカスタムclassの配下のaタグに設定が必要)

style.css

.custom-calendar-saturday a.ui-state-default {
    background-color: #c1e0ff;
}
.custom-calendar-sunday a.ui-state-default {
    background-color: #ffc1c1;
}

祝日の日付にclassを設定

今回の主題、holiday_jp-jsを使用して祝日の日付を判定し、classを設定します。

ポイント

  • holiday_jpで対象の日付が祝日かを判定(4行目〜7行目)
    土日に祝日が被っていた場合、祝日を優先したいので、土日の判定よりも先に判定しています。

main.js

$(function () {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            const holiday = holiday_jp.between(date, date);
            if (holiday.length > 0) {
                // 祝日の場合
                return [true, "custom-calendar-holiday", ""];
            } else if (date.getDay() === 0) {
                // 日曜日の場合
                return [true, "custom-calendar-sunday", ""];
            } else if (date.getDay() === 6) {
                // 月曜日の場合
                return [true, "custom-calendar-saturday", ""];
            }
            // 平日の場合
            return [true, "custom-calendar-weekday", ""];
        }
    });
});

祝日の日付のclassにCSSを設定

祝日の日付にも背景色のCSSを設定します。

style.css

.custom-calendar-saturday a.ui-state-default {
    background-color: #c1e0ff;
}
.custom-calendar-sunday a.ui-state-default {
    background-color: #ffc1c1;
}
.custom-calendar-holiday a.ui-state-default {
    background-color: #ffe0c1;
}

確認

上記修正で完了。

土日、祝日に背景色が設定されました。

JavaScriptカテゴリの最新記事