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