表示するページのスタイルシートに次のコードを追記してください。
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を導入した方が早そうですけども。
はじめまして。色々検索していたらこのブログにたどり着きました。
返信削除datepickerのcssカスタマイズについて、特定の日(8月29日と8月31日)だけ色を変えることはできるのでしょうか。
特定日のクラスがあるのでしたら教えていただけると助かります。
はじめまして。
削除今、手元に確認できる環境がないので確実ではないですが、CSSのみではちょっと難しいかと思います。
「特定の日」を指定して、JavaScriptでclassを追記することで、対応可能かと思います。下記ページが参考になるかと。
https://www.of-mokuren.com/blog/archives/737
http://qiita.com/mnrck07/items/f8d9b004f5505494e3ce
http://acro-engineer.hatenablog.com/entry/20111117/1321575622
教えていただいたページを参考にjsファイルを直したらうまくいきました。
削除ありがとうございました。
お役に立てたようでなによりです(^ ^)
削除このコメントは投稿者によって削除されました。
返信削除はじめまして!^^
So-netブログでカスタマイズしたく、ググっていたら、
OBOROさんの当ページに辿り着きました。
早速、実践させて頂き、無事に変更できました!↓
http://donmaru.blog.so-net.ne.jp/
有難うございました♪m(_ _)m