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