最終更新日から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;
}
確認
上記修正で完了。
土日、祝日に背景色が設定されました。
