Jquery DatePicker color Sunday red

Question

Is there a way to change the color to, say red, the Sundays in a Jquery Datepicker?

Answer 1

Under the Theming tab on the documentation page, you can see the example HTML output by the plugin. You should be able to use selectors to target specific elements in the HTML:

.ui-datepicker-calendar > tbody td:first-child {
    background-color: red;
}

jQuery:

$(".ui-datepicker-calendar > tbody td:first-child").css("background-color: red");

Untested and assumes the first column is Sunday, so a bit of tweaking might be required. If Sunday is set to a different column, use :nth-child(n) instead.

Answer 2

Assuming that the first column is sunday then the following jQuery should do the trick:

$('table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a').css({'background':'#f00'});

Though it would have to be run each time the calendar is changed e.g. when you select a date as the calendar is redrawn every time.

You could use the same selector in css3 though it is not supported in IE.

table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a
{
    background: #f00;
}

Answer 3

For Sundays and Saturdays you can consider using fact that jquery datepicker adds class .ui-datepicker-week-end so you can add .ui-datepicker-week-end{color:#f00;} to you css file.

If you want to handle only Sundays you must relay on fact that this will be either first or last column in a table generated by jquery datepicker (it is locale-dependent).

General advice: use firefox+firebug(or sth similiar) to inspect html code. it gives a lot of ideas how to accomplish tasks related to jquery DOM traversing.

Answer 4

If you have a local copy of the ui.datepicker.js file (the custom minified file would work too) and are doing nothing else with the .ui-datepicker-week-end class, you can edit it (making a copy to edit is preferred,) so that only Sunday is assigned that class.

In the ui.datepicker.js file, searching for 'week-end' should bring up two results with this inline if statement preceding them: (t+h+6)%7>=5? Changing the >=5 to ==6 will assign the .ui-datepicker-week-end class only to Sundays then.

(t+h+6)%7==6?" ui-datepicker-week-end":""

Then you can add CSS styling as you see fit to that class:

.ui-datepicker-week-end {
    background: #f00;
}