Jquery DatePicker color Sunday red

Question

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

Solution 1

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.

Solution 2

$('#something').datepicker({
    beforeShowDay:function(date){
        if(date.toString().indexOf('Sun ')!=-1)
            return [1,'red'];else
            return [1];
    }
}

css:

.ui-datepicker td.red a{
color:#f00 !important;
}    

Not very beautiful, but works as needed.

Solution 3

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

Solution 4

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

Solution 5

If you need to color both Saturday and Sunday use this CSS:

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: #C00;}

View more solutions