Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version.


DEMOS
2 Month and 1 Month
Small Day Cells
Full Week Selection With Small Day Cells

USAGE

// append side-by-side jCal with 4 day selection to jCalTarget element
$('#jCalTarget').jCal({
	day:			new Date(),
	days:			4,
	showMonths:		2,
	monthSelect:	true,
	callback:		function (day, days) {
			console.log('selected ' + days + ' days starting ' + day);
		}
	});

Google Code Page http://code.google.com/p/jquery-jcal
jQuery.com Project Page http://plugins.jquery.com/project/jCal

CURRENT RELEASE
jCal.0.3.6.zip - LATEST includes jCal.js core, jCal-light.js (lighter version without month or year pulldowns), jsmin'd versions, packer versions, pre-compressed gzip .jsgz versions, jCal.css, jquery.animate.clip.js plugin, example instantiation and images

CORE ASSETS

• jCal.js - current jCal core
• jCal.css - current default jCal stylesheet

CHANGELOG

• 0.3.6
  • fixed month/year titles in safari and chrome not spacing correctly - this is because the $(window).load() is more reliable in these browsers than the $(document).ready() especially with applied CSS values.
  • fixed even propagation and behavior in safari/chrome for the month/year pulldowns
• 0.3.5
  • fixed issue with wrong 2nd month displaying if current day of first month was greater than the number of days in the 2nd month. i.e. current date of 7/31/2008 and only 30 days in Sept then Oct would automatically be shown as the next month incorrectly.
• 0.3.4
  • DayOfWeek loop fix and speedup suggested by Ioannis Cherouvim
  • fixed so that code could be properly jsmin'd and packer'd
• 0.3.3
  • added pretty combobox-ish pulldowns for months and years for easier navigation of date
  • variable scope bug fixes - no more lost or conflicting settings with multiple jCals
• 0.3.2
  • speed improvements when scrolling through months and rollover day highlighting - 10% faster
  • fixed retention of selected days when scrolling through months when selected days span multiple months
• 0.3.1
  • fixed bug when scrolling over months that were completely blacked out via the dCheck functionality.
  • fixed the dCheck day to be "zeroed out" i.e. the BOD (Beginning Of Day - 00:00:000GMT)to make the dCheck easier to work with.
• 0.3.0
  • Fixed bug with jQuery 1.2.6 without the need of a patched version of the jQuery core. As it turns out the jQuery.fn.clone(true) was misused in my code when a simple jQuery.fn.appendTo() could be used to move elements from one container to another faster. This should not only now with with jQuery 1.2.6 but be significantly faster than previous versions when scrolling through months
  • Added ability to access each instantiated calendar's selected day and selected number of days via the $('#container').data('day') and $('#container').data('days') cached variables from any other javascript scope
  • The selected day(s) are now re-selected when scrolling through months and then scrolling back to the month(s) the day(s) are selected in
• 0.2.3
  • included patched stock v1.2.6 jquery.js in minified format with fix from http://dev.jquery.com/ticket/2973
• 0.2.2
  • ability to force selection to start at beginning of week as per dayOffset setting
• 0.2.1
  • cutoff sequential days incorrect on last month
  • wrong month output in click callback
  • added comments to extensible options
  • now can configure how month starts, i.e. starts sunday, starts monday + more callback style changes
  • added comments to help configure styles
• 0.2
  • Added scrolling "carousel" to month navigation
• 0.1.1
  • fixed scope when scrolling through months on multiple calendars
• 0.1
  • initial release

Tested Browsers IE7, FF 3.x, IE6.0.2800/2900 (pulldown overlap), Safari 3.1.1, Chrome 2.149.27

To change the sizing of the calendars on the fly via jQuery, as done in the in-line demo at top, here's a quick function:

function changeCalSize (daySize) {
	var daySize = (parseInt(daySize) || 30), 
		monthSize = ( daySize + 2 ) * 7,
		titleSize = monthSize - 16,
		titleMsgSize = ( titleSize / 2 ) - 4;
	$('head:first').append(
		'<style>' +
			'.jCalMo .day,.jCalMo .invday,.jCalMo .pday,.jCalMo .aday,.jCalMo .selectedDay,.jCalMo .dow { width:' + daySize + 'px !important; height:' + daySize + 'px !important; }' +
			'.jCalMo .dow { height:auto !important }' +
			'.jCalMo, .jCalMo .jCal { width:' + monthSize + 'px !important; }' +
			'.jCalMo .month { width:' + titleSize + 'px !important; }' +
			'.jCalMo .month span { width:' + titleMsgSize  + 'px !important; }' +
		'</style>');
}