jQuery UI datepicker: How to color sundays red?

Question

i need sundays to highlight in red.

I know that there is a class called ui-datepicker-week-end.

My problem is, that the other classes (ui-widget-content and ui-state-default) overwrite the red color of ui-datepicker-week-end, even if set !important.

The only thing that is colored are the weekend days in the headline of the calendar.

Answer 1

You can style the anchors that are descendants of the .ui-datepicker-week-end elements, and set their background-image property to none when adding the background color. This gives good results without you having to use !important:

.ui-datepicker-week-end a {
    background-image: none;
    background-color: red;
}

EDIT: If you want to set the color property instead of background-color, you will indeed have to use !important:

.ui-datepicker-week-end a {
    color: red !important;
}

You can see the results in this fiddle.

Answer 2

Easy way

sunday color red this way

.datepicker table tr td:first-child {
color: red
}

monday color red this way

.datepicker table tr td:first-child +td {
color: red
}

thuesday color red this way

.datepicker table tr td:first-child + td + td {
color: red
}