公開している 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]; }, });