表示するページのスタイルシートに次のコードを追記してください。
table.ui-datepicker-calendar tbody td:first-child a.ui-state-default{ color: #F00; } table.ui-datepicker-calendar tbody td:last-child a.ui-state-default { color: #00F; }祝日指定がない場合は、CSSだけで十分なので、手軽に変更できます。 ここでは、文字色だけを変更していますが、当然、背景なども変更可能です。 曜日名を変更する場合は下記のようにすればOK。
table.ui-datepicker-calendar thead th:first-child { /* 日曜日のスタイルを記述 */ } table.ui-datepicker-calendar thead th:last-child { /* 土曜日のスタイルを記述 */ }
ただし、first-child、last-childは古いブラウザでは正しく表示されませんので、注意が必要です。
お仕事上、古いブラウザに対応必須とか休日も必要という方は、CSSだけでは無理ですので(たぶん)、JavaScriptで対応する必要があります。
たとえばWindowsXP+IE8ではfirst-child(日曜日)は表示されますが、last-child(土曜日)は認識されません。 個人的には
気が向いたら、IE対策のhackも追記しますね(向かない)。
追記
IE7、IE8はこれでOK。
でもIE6はこれだと土日同じ色になっちゃうのでダメですけども。
IE7、IE8はこれでOK。
でもIE6はこれだと土日同じ色になっちゃうのでダメですけども。
table.ui-datepicker-calendar tbody td.ui-datepicker-week-end a.ui-state-default { color: #00F; } table.ui-datepicker-calendar tbody td:first-child a.ui-state-default{ color: #F00; } table.ui-datepicker-calendar tbody td:last-child a.ui-state-default { color: #00F; }あれこれいじっているよりGCalHolidaysを導入した方が早そうですけども。