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

更新日: 公開日:2015/09/12
jQueryでカレンダーを実装

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

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

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

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

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

Datepicker の土日の背景色を変える【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 を設定するのがポイントです。

日付:

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

Datepicker の土日の背景色を変える【CSS】
/* 日曜日のカラー設定 */
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 で土日の背景色を変更する方法でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。