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['d' + ((new Date(2007, 0, 1)).getTime())] = 'New Year\'s day'; bankHolidays['d' + ((new Date(2007, 3, 6)).getTime())] = 'Good friday'; bankHolidays['d' + ((new Date(2007, 3, 9)).getTime())] = 'Easter Monday'; bankHolidays['d' + ((new Date(2007, 4, 7)).getTime())] = 'Early May Bank Holiday'; bankHolidays['d' + ((new Date(2007, 4, 28)).getTime())] = 'Spring Bnk Holiday'; bankHolidays['d' + ((new Date(2007, 7, 27)).getTime())] = 'Summer Bank Holiday'; bankHolidays['d' + ((new Date(2007, 11, 25)).getTime())] = 'Christmas Day'; bankHolidays['d' + ((new Date(2007, 11, 26)).getTime())] = 'Boxing Day'; var markBankHolidays = function($td, thisDate, month, year) { if (bankHolidays['d' + thisDate.getTime()]) { var bankHolidayName = bankHolidays['d' + thisDate.getTime()]; $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; } ); });