jQuery UI の Datepicker で土曜日／日曜日の背景色を変える方法【CSS対応】

Datepicker で表示されるカレンダーは背景色が全て同じであるため、土曜や日曜が直感的に分からないデメリットがあります。設定によってはカレンダーを月曜始まりにすることもできるため、利用者がカレンダーを開いて、すぐに土日も認識できる作りにしておくことは利便性の向上にもつながります。

jQuery UI の Datepicker でカレンダーを月曜始まりにする方法

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。基本となる実装方法、ならびに日本語対応の手順については、次のページを参照く...

特定の曜日の背景色を変更するためのオプション項目は存在しないため、スタイルシートによって実現します。

Datepicker カレンダーの土曜日／日曜日の背景色を変える

ここで紹介するスタイルシートは、既存の jQuery UI 用の CSS ファイルに手を加えず、別途定義すれば反映されるようになっています。また jQuery UI のテーマによっては色味が合わないことがあるので、必要に応じて CSS の設定値を変更してご利用ください。

日曜始まりのカレンダーの場合

/* 日曜日のカラー設定 */
td.ui-datepicker-week-end:first-child a.ui-state-default{
  background-color: #ffecec;   /* 背景色を設定 */
  color: #f00!important;       /* 文字色を設定 */
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
  background-color: #eaeaff;   /* 背景色を設定 */
  color: #00f!important;       /* 文字色を設定 */
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
  opacity: 0.8;
}
/* 当日を示す色はそのまま */
td.ui-datepicker-week-end a.ui-state-highlight{
  background-color: #fffa90!important;
}

週末はカレンダーのセルに ui-datepicker-week-end クラスが設定されているので、その設定を有効活用します。日曜日に first-child を設定して、土曜日に last-child を設定するのがポイントです。

月曜始まりのカレンダーの場合

/* 日曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
  background-color: #ffecec;   /* 背景色を設定 */
  color: #f00!important;       /* 文字色を設定 */
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end a.ui-state-default{
  background-color: #eaeaff;   /* 背景色を設定 */
  color: #00f!important;       /* 文字色を設定 */
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
  opacity: 0.8;
}
/* 当日を示す色はそのまま */
td.ui-datepicker-week-end a.ui-state-highlight{
  background-color: #fffa90!important;
}

月曜始まりの場合、日曜日のセルが last-child に該当します。一方で、土曜日のセルは first-child を設定してもうまく動かないため、指定していません。

週末を示す曜日の色を変えるだけで、かなりカレンダーが使いやすくなった印象を受けますね。背景色はそのままで、文字色の変更だけでも効果は十分に得られるので、好みに合わせたデザインを選択してください。

以上、jQuery UI の Datepicker で土日の背景色を変更する方法でした。