jquery.datePicker example: renderCalendarCallback

< date picker home

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.

Page sourcecode

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