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 particular case I add a class to all of the Thursday cells in the currently shown month and also add a click handler to them. I then update the text in all of the Friday cells.

As you can imagine, you could easily use this callback to create a version of the calendar which behaved as an events listings or something (although you would need to remember to make it degrade gracefully for users without JavaScript turned on and for search engines).

Page sourcecode

$(function()
{
	$('#dow').bind(
		'change',
		function()
		{
			Date.firstDayOfWeek = Number(this.options[this.selectedIndex].value);
		}
	);
	var testCallback = function($td, thisDate, month, year)
	{
		if ($td.is('.current-month') && thisDate.getDay() == 4) {
			var d = thisDate.getDate();
			$td.bind(
				'click',
				function()
				{
					alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year);
				}
			).addClass('thursday');
		} else if (thisDate.getDay() == 5) {
			$td.html('Friday the ' + $td.html() + 'th');
		}
	}
	$('#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:testCallback});
			
			return false;
		}
	);
});