
| home | AJAX (6) || C#.NET (5) || Coldfusion Development (16) || DHTML (14) || Flash Development (19) || jQuery (4) || MSSQL (2) || UNIX (10) |
| 5.12.08 | Multiday Calendar Datepicker JQuery Plugin |
Project Page: http://plugins.jquery.com/project/jCal
releases
core assets
changelog
requirements
jCal core jQuery plugin code (<9KB, not jsmin’d, no comments)
function drawCalControl (target, opt) {
$(target).append(
'<div class="jCal">' +
( (opt.ind == 0) ? '<div class="left"><img src="_left.gif"></div>' : '' ) +
'<div class="month">' + opt.ml[opt.day.getMonth()] + ' ' + opt.day.getFullYear() + '</div>' +
( (opt.ind == ( opt.showMonths - 1 )) ? '<div class="right"><img src="_right.gif"></div>' : '' ) +
'</div>');
$(target).find('.jCal .left').bind("click",
function (e) {
if ($('.jCalMask', opt._target).length > 0) return false;
var mD = { w:0, h:0 };
$('.jCalMo', opt._target).each( function () {
mD.w += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'));
var cH = $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'));
mD.h = ((cH > mD.h) ? cH : mD.h);
} );
$(opt._target).prepend('<div class="jCalMo"></div>');
opt.day = new Date( $('.day[id^=' + opt.cID + 'd_]:first', opt._target).attr('id').replace(opt.cID + 'd_', '').replace(/_/g, '/') );
opt.day.setDate(1);
opt.day.setMonth( opt.day.getMonth() - 1 );
drawCalControl($('.jCalMo:first', opt._target), opt);
drawCal($('.jCalMo:first', opt._target), opt);
if (opt.showMonths > 1) {
$('.right', opt._target).clone(true).appendTo( $('.jCalMo:eq(1) .jCal', opt._target) );
$('.left:last, .right:last', opt._target).remove();
}
$(opt._target).append('<div class="jCalSpace" style="width:'+mD.w+'px; height:'+mD.h+'px;"></div>');
$('.jCalMo', opt._target).wrapAll(
'<div class="jCalMask" style="clip:rect(0px '+mD.w+'px '+mD.h+'px 0px); width:'+ ( mD.w + ( mD.w / opt.showMonths ) ) +'px; height:'+mD.h+'px;">' +
'<div class="jCalMove"></div>' +
'</div>');
$('.jCalMove', opt._target).css('margin-left', ( ( mD.w / opt.showMonths ) * -1 ) + 'px').css('opacity', 0.5).animate({ marginLeft:'0px' }, 'fast',
function () {
$(this).children('.jCalMo:not(:last)').clone(true).appendTo( $(opt._target) );
$('.jCalSpace, .jCalMask', opt._target).empty().remove();
});
});
$(target).find('.jCal .right').bind("click",
function (e) {
if ($('.jCalMask', opt._target).length > 0) return false;
var mD = { w:0, h:0 };
$('.jCalMo', opt._target).each( function () {
mD.w += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'));
var cH = $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'));
mD.h = ((cH > mD.h) ? cH : mD.h);
} );
$(opt._target).append('<div class="jCalMo"></div>');
opt.day = new Date( $('.day[id^=' + opt.cID + 'd_]:last', opt._target).attr('id').replace(opt.cID + 'd_', '').replace(/_/g, '/') );
opt.day.setDate(1);
opt.day.setMonth( opt.day.getMonth() + 1 );
drawCalControl($('.jCalMo:last', opt._target), opt);
drawCal($('.jCalMo:last', opt._target), opt);
if (opt.showMonths > 1) {
$('.left', opt._target).clone(true).prependTo( $('.jCalMo:eq(1) .jCal', opt._target) );
$('.left:first, .right:first', opt._target).remove();
}
$(opt._target).append('<div class="jCalSpace" style="width:'+mD.w+'px; height:'+mD.h+'px;"></div>');
$('.jCalMo', opt._target).wrapAll(
'<div class="jCalMask" style="clip:rect(0px '+mD.w+'px '+mD.h+'px 0px); width:'+ ( mD.w + ( mD.w / opt.showMonths ) ) +'px; height:'+mD.h+'px;">' +
'<div class="jCalMove"></div>' +
'</div>');
$('.jCalMove', opt._target).css('opacity', 0.5).animate({ marginLeft:( ( mD.w / opt.showMonths ) * -1 ) + 'px' }, 'fast',
function () {
$(this).children('.jCalMo:not(:first)').clone(true).appendTo( $(opt._target) );
$('.jCalSpace, .jCalMask', opt._target).empty().remove();
});
});
}
function drawCal (target, opt) {
for (var ds in opt.dow)
$(target).append('<div class="dow">' + opt.dow[ds] + '</div>');
var fd = new Date( new Date( opt.day.getTime() ).setDate(1) );
var ldlm = new Date( new Date( fd.getTime() ).setDate(0) );
var ld = new Date( new Date( new Date( fd.getTime() ).setMonth( fd.getMonth() + 1 ) ).setDate(0) );
var offsetDayStart = ( ( fd.getDay() < opt.dayOffset ) ? ( opt.dayOffset - 7 ) : 1 );
var offsetDayEnd = ( ( ld.getDay() < opt.dayOffset ) ? ( 7 - ld.getDay() ) : ld.getDay() );
for ( var d = offsetDayStart; d < ( fd.getDay() + ld.getDate() + ( 7 - offsetDayEnd ) ); d++)
$(target).append(
(( d <= ( fd.getDay() - opt.dayOffset ) ) ?
'<div id="' + opt.cID + 'd' + d + '" class="pday">' + ( ldlm.getDate() - ( ( fd.getDay() - opt.dayOffset ) - d ) ) + '</div>'
: ( ( d > ( ( fd.getDay() - opt.dayOffset ) + ld.getDate() ) ) ?
'<div id="' + opt.cID + 'd' + d + '" class="aday">' + ( d - ( ( fd.getDay() - opt.dayOffset ) + ld.getDate() ) ) + '</div>'
: '<div id="' + opt.cID + 'd_' + (fd.getMonth() + 1) + '_' + ( d - ( fd.getDay() - opt.dayOffset ) ) + '_' + fd.getFullYear() + '" class="' +
( ( opt.dCheck( new Date( (new Date( fd.getTime() )).setDate( d - ( fd.getDay() - opt.dayOffset ) ) ) ) ) ? 'day' : 'invday' ) +
'">' + ( d - ( fd.getDay() - opt.dayOffset ) ) + '</div>'
)
)
);
$(target).find('div[id^=' + opt.cID + 'd]:first, div[id^=' + opt.cID + 'd]:nth-child(7n+2)').before( '<br style="clear:both; font-size:0.1em;" />' );
$(target).find('div[id^=' + opt.cID + 'd_]:not(.invday)').bind("mouseover mouseout click", function(e){
if ($('.jCalMask', opt._target).length > 0) return false;
var osDate = new Date ( $(this).attr('id').replace(/c[0-9]{1,}d_([0-9]{1,2})_([0-9]{1,2})_([0-9]{4})/, '$1/$2/$3') );
var sDate = new Date ( osDate.getTime() );
if (e.type == 'click')
$('div[id^=' + opt.cID + 'd_].selectedDay', $(opt._target).parent()).removeClass('selectedDay').animate(
{ backgroundColor:opt.defaultBG }, 'fast', function () {
$(this).css('backgroundColor', '');
});
for (var di=0; di < opt.days; di++) {
var currDay = $(opt._target).find('#' + opt.cID + 'd_' + ( sDate.getMonth() + 1 ) + '_' + sDate.getDate() + '_' + sDate.getFullYear());
if ( currDay.length == 0 || $(currDay).hasClass('invday') ) break;
$(currDay).toggleClass( ( (e.type == 'click') ? 'selectedDay' : 'overDay' ) );
if (e.type == 'click') $(currDay).stop().animate({ backgroundColor:opt.selectedBG }, 'fast', function () {
$(this).css('backgroundColor', opt.selectedBG);
});
else $(currDay).css('backgroundColor', '').stop();
sDate.setDate( sDate.getDate() + 1 );
}
if (e.type == 'click') opt.callback( osDate, di );
});
}
})(jQuery);
Download this code: jCal/jCal.js
jCal CSS styles
Download this code: jCal/jCal.css
example plugin use code
<html>
<head>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.color.js"></script>
<script language="JavaScript" type="text/javascript" src="jCal.js"></script>
<link rel="stylesheet" type="text/css" href="jCal.css">
<script>
$(document).ready(function () {
$('#calOne').jCal({
day: new Date(),
days: 4,
showMonths: 2,
dCheck: function (day) {
return (day.getDate() != 3);
},
callback: function (day, days) {
$(this._target).find('.dInfo').remove();
var dCursor = new Date( day.getTime() );
for (var di=0; di < days; di++) {
var currDay = document.getElementById(this.cID + 'd_' +
( dCursor.getMonth() + 1 ) + '_' + dCursor.getDate() + '_' + dCursor.getFullYear());
$(currDay, this._target).append('<div class="dInfo"><span style="color:#ccc">$</span>1231</div>');
dCursor.setDate( dCursor.getDate() + 1 );
}
$('#calOneResult').append('<div style="clear:both; font-size:7pt;">' + days + ' days starting ' +
( day.getMonth() + 1 ) + '/' + day.getDate() + '/' + day.getFullYear() + '</div>');
return true;
}
});
$('#calTwo').jCal({
day: new Date( (new Date()).setMonth( (new Date()).getMonth() + 2 ) ),
days: 2,
showMonths: 1,
sDate: new Date(),
dCheck: function (day) {
return (day.getDay() != 6);
},
callback: function (day, days) {
$('#calTwoResult').append('<div style="clear:both; font-size:7pt;">' + days + ' days starting ' +
( day.getMonth() + 1 ) + '/' + day.getDate() + '/' + day.getFullYear() + '</div>');
return true;
}
});
});
</script>
<style>
.dInfo {
font-family:tahoma;
font-size:7pt;
color:#fff;
padding-top:1px;
padding-bottom:1px;
background:rgb(0, 102, 153);
}
</style>
</head>
<body marginheight=0 marginwidth=0 topmargin=0 rightmargin=0 leftmargin=0>
<table width="100%">
<tr>
<td align=left id="calOne" valign=top style="padding:10px; background:#E3E3E3;">
loading calendar one
</td>
<td align=left id="calTwo" valign=top style="padding:10px; background:#E3E3E3;">
loading calendar two
</td>
<tr>
<tr>
<td align=left id="calOneResult" valign=top style="padding:10px; background:#E3E3E3;"></td>
<td align=left id="calTwoResult" valign=top style="padding:10px; background:#E3E3E3;"></td>
<tr>
</table>
<div id="ttt"></div>
</body>
</html>
Download this code: jCal/jCal.html
Another example with:
Here is the html that instantiates it: jCal.small.html
And the css that controls the style: jCal.small.css
| Nikolaj on 5.12.08 at 2pm |
|
ternaries triumph |
| Max on 5.16.08 at 8am |
|
THANX |
| Oscar on 5.31.08 at 11am |
|
hello. Great pluging but how can I change the day to start the week in Monday? |
| Jim Palmer on 6.26.08 at 2pm |
|
Oscar |
4 Comments