CURRENT PROJECTS
loading
CATEGORIES AND POSTS
loading
overset
DEVELOPMENT LOG FOR JIM PALMER
Posted 05/12/2008 in jquery


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

loading demo..

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 CHANGELOG 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>');
}
comments
loading
new comment
NAME
EMAIL ME ON UPDATES
EMAIL (hidden)
URL
MESSAGE TAGS ALLOWED: <code> <a> <pre class="code [tab4|tabX|inline|bash]"> <br>
PREVIEW COMMENT
TURING TEST
gravatar