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.

The contents of this div will be replaced with a call to $('#calendar-me').renderCalendar().
Choose a month to render

Page sourcecode

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