The following example demonstrates the use of $().renderCalendar as introduced by jquery.datePicker.js - we supply a renderCallback parameter so that we have control over how each day is rendered.
In this case I add a class of "bank-holiday" to all UK bank holidays [1] in 2007, make them give an alert when clicked as well as showing the name of the bank holiday in the table.
$(function() { $('#dow').bind( 'change', function() { Date.firstDayOfWeek = Number(this.options[this.selectedIndex].value); } ); var bankHolidays = {}; bankHolidays[(new Date(2007, 0, 1)).asString()] = 'New Year\'s day'; bankHolidays[(new Date(2007, 3, 6)).asString()] = 'Good friday'; bankHolidays[(new Date(2007, 3, 9)).asString()] = 'Easter Monday'; bankHolidays[(new Date(2007, 4, 7)).asString()] = 'Early May Bank Holiday'; bankHolidays[(new Date(2007, 4, 28)).asString()] = 'Spring Bnk Holiday'; bankHolidays[(new Date(2007, 7, 27)).asString()] = 'Summer Bank Holiday'; bankHolidays[(new Date(2007, 11, 25)).asString()] = 'Christmas Day'; bankHolidays[(new Date(2007, 11, 26)).asString()] = 'Boxing Day'; var markBankHolidays = function($td, thisDate, month, year) { var bankHolidayName = bankHolidays[thisDate.asString()]; if (bankHolidayName) { $td.bind( 'click', function() { alert('You clicked on ' + bankHolidayName); } ).addClass('bank-holiday') .html(bankHolidayName + '(' + thisDate.getDate() + ')'); } } $('#chooseDateForm').bind( 'submit', function() { var month = this.month.options[this.month.selectedIndex].value; var year = this.year.options[this.year.selectedIndex].value; $('#calendar-me').renderCalendar({month:month, year:year, renderCallback:markBankHolidays, showHeader:$.dpConst.SHOW_HEADER_LONG}); return false; } ); });