jQuery ui Datepicker に、祝日休日の文字色背景色をつける

公開している JavaScript版祝日計算にサンプルとして付与している jQuery-ui Datepicker を
祝日休日の文字色背景色をつけるように更新した。
Java祝日計算 プロジェクト日本語トップページ - OSDN

class名 = ui-datepicker-holiday として、CSSを用意する。
ui-state-default と ui-state-active (選択中)に !important で以下のように指定する。
選択中は、jQuery ui が配布するものは、 !important が付いていないので順番を考慮して以下のようにして
最後に日曜日と土曜日の色を指定する。

@CHARSET "UTF-8";
.ui-state-active
, .ui-widget-content .ui-state-active
, .ui-widget-header .ui-state-active
, a.ui-button:active
, .ui-button:active
, .ui-button.ui-state-active:hover {
   border: 1px solid #003eff !important;
   background: #007fff !important;
   font-weight: normal !important;
   color: #ffffff !important;
}
.ui-datepicker-holiday a.ui-state-default{
   border: 1px solid #ecc0c0;
   background-color: #ffecec !important;
   color: #ff0000 !important;
}
.ui-datepicker-holiday a.ui-state-active{
   border: 1px solid #003eff !important;
   background: #007fff !important;
   font-weight: normal !important;
   color: #ffffff !important;   
}
/* 日曜日のカラー設定 */
.ui-datepicker-week-end:first-child a{
   background-color: #ffecec;
   color: #ff0000;
}
/* 土曜日のカラー設定 */
.ui-datepicker-week-end:last-child a{
   background-color: #eaeaff;
   color: #0000ff;
}

これを ui_datepicker_holiday.css として、HTMLでは、

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

の後で、

<link rel="stylesheet" type="text/css" href="ui_datepicker_holiday.css">

とする。
それから、祝日・振替休日の色を反映させるためには、Datepicker のオプション
beforeShowDay を使用して
返却値配列の2番目で日付に付与する class 属性名を 祝日・振替休日の場合に、
ui-datepicker-holiday を返すようにする。
JavaScript版祝日計算の jholiday.js の JHoliday.isHolidayDate メソッドの結果を使う。

$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$("#datepicker").datepicker({
   prevText:"前月", nextText:"翌月",
   changeMonth: true,
   changeYear: true, yearRange: '-2:+6',
   beforeShowDay: function(d){
       return [true,JHoliday.isHolidayDate(d) ? "ui-datepicker-holiday" : "",null];
   },
});