Question

I have the datepicker working and it is fully functional.

From the above image it can be seen that the week picker works. However I would like the datepicker to highlight the current week. Which in this example should highlight whole of the start of the week. Which I would like to look like this or similar

How is this done?

Edited
Ideally when the page loads up I would like the current week to be highlighted instead of the user having to select the week themselves. In the example supplied, the day is currently selected but I wish to have the current week automatically selected. Like below

Answer 1

The TD that is selected has the class ui-datepicker-current-day, so that might be what you want to find. You can do the highlighting by attaching a click event with the datepicker element, e.g.

$( "#datepicker" ).datepicker().click(function(event) {
    // highlight the TR
    $(".ui-datepicker-current-day").parent().addClass('highlight');

    // highlight the TD > A
    $(".ui-datepicker-current-day").siblings().find('a').addClass('highlight2');
}); 

And you can define the highlight and highlight2 classes to your heart’s content.

Note that, the onSelect event does not do the trick, as the calendar is refreshed each time a date is clicked.

Here is an example: http://jsfiddle.net/9DdfL/2/