jQuery UI Datepicker 土曜 日曜の色をCSSだけで変更する

jQuery UI Datepickerは、土日まとめて色を変える場合には ui-datepicker-week-end というclassが用意されていますが、土曜と日曜のそれぞれの色を変更したい場合は、first-childとlast-childを遣うことでそれぞれ日曜日と土曜日の色を指定できます。

表示するページのスタイルシートに次のコードを追記してください。

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は利用しているヤツが悪い、っていうかいい加減にしろやマイクロソフト！という気分ですので、IEのことなど知っったことか、という気分ですが、お客様のサイトの時とかはそういうわけにもいきませんよね。っていうか取り消し線引いた意味があんまりありませんね。IE嫌い。迷惑。

気が向いたら、IE対策のhackも追記しますね（向かない）。

追記
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を導入した方が早そうですけども。