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.

Solution 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.

Solution 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
}

Comments

[Keith L.]

thanks for your answer. But it is still overwritten. Please have a look at the screenshot of F12 developer tools: img0.www.suckmypic.net/img/g/X/rwFhrsfy/jquery-ui-calendar.p‌​ng

[Frédéric Hamidi]

Apologies, I thought you wanted to set background-color instead of color. However, !important works in my tests when used with color. I'll update my answer.