The following example displays how you can use a custom cell renderer to control the behaviour of the date picker. In this case I add a class of "weekend" to the cells which fall on a weekend and I also add the class "disabled". This is a special class which prevents those days from being selectable.
NOTE: You will need firebug to see the results of the demo - firebug lite is included in this page so whatever browser you are in just press F12 to open up the firebug console.
$(function()
{
$('.date-pick')
.datePicker(
{
createButton:false,
renderCallback:function($td, thisDate, month, year)
{
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}
}
}
)
.bind('click',
function()
{
$(this).dpDisplay();
this.blur();
return false;
}
)
.bind('dateSelected',
function(e, selectedDate, $td)
{
console.log('You selected ' + selectedDate);
}
);
});
table.jCalendar td.weekend, table.jCalendar td.weekend:hover {
background: #777;
color: #555;
}