jquery.jCal.js显示日历插件详解编程语言

$('#calOne').jCal({ 
　　day: new Date(), // 初始日期设置，一般是当前的，所以填写为new Date 
　　days:1,    // 当你鼠标移动到日期控件上默认所选择的日期数 
　　showMonths: 1, // 日期控件的个数，如果你填写2，那么将会显示相邻二个月的日期 
　　monthSelect:false, // 是否允许月份选择 
　　dCheck:function (day) { return true; }, // 你可以设置一些日期不可选（参考实例） 
　　callback: function (day, days) { return true; }, // 点击日期时候的回调函数（参考实例） 
　　selectedBG: 'rgb(0, 143, 214)',   // 日期被选择后的背景颜色（貌似无效） 
　　defaultBG: 'rgb(255, 255, 255)', // 日期没有被选择时的背景颜色（貌似无效） 
　　dayOffset:0,   // 意味着日期排序从星期日开始，1意味着从星期一 
　　forceWeek:false, // true=force selection at start of week, false=select days out from selected day 
　　dow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], // 设置日期表格行头，是转化成中文的关键 
　　ml: ['January', 'February', 'March’, 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],//月份的名称，可以转化为中文 
　　ms:    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//月份的简写 
})

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.animate.clip.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.jCal.min.js"></script> 
<script> 
$(function () { 
　　$('#calendar').jCal({ 
　　　　day: new Date(), 
　　　　days: 1, 
　　　　showMonths: 2, 
　　　　monthSelect: true, 
　　　　dow: ['日', '一', '二', '三', '四', '五', '六'], 
　　　　ml: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', ’10月', '11月', '12月'], 
　　　　callback: function (day, days) { 
　　　　　　$('#result').html(day.getFullYear() + '/' + (day.getMonth() + 1) +'/'+ day.getDate()); 
　　　　} 
　　}); 
}); 
</script>

<!–显示日历–> 
<div id="calendar"></div> 
<!–显示选择日历的结果–> 
<div id="result"></div>

<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/jquery.jCal.css" media="all" />

/* default dimensions and justification for each month including title */ 
.jCal { 
/* each day width + border-left + border-right */ 
width:224px; 
height:21px; 
text-align:center; 
vertical-align:top; 
} 
/* default dimensions and justification for each month not including title */ 
.jCalMo { 
width:224px;                /* each day width + border-left + border-right */ 
float:left; 
overflow:visible; 
height:100%; 
padding-right:2px; 
padding-left:2px; 
white-space:nowrap; 
} 
/* top month display block – i.e. January */ 
.jCal .month, .jCal .monthSelect, .jCal .monthName, .jCal .monthYear { 
line-height:16px; 
height:16px; 
text-align:center; 
vertical-align:bottom; 
font-family:Tahoma; 
font-size:8pt; 
color:#000000; 
cursor:pointer; 
float:left; 
} 
/* month name per calendar style – includes left/right padding and alignment */ 
.jCal .monthName { 
padding-left:2px; 
padding-right:2px; 
text-align:right; 
} 
/* year per calendar style – includes left/right padding and alignment */ 
.jCal .monthYear { 
float:right; 
padding-left:2px; 
padding-right:2px; 
text-align:left; 
} 
/* hilight style for new month combobox pulldown for hover */ 
.jCal .monthSelect { 
background:#EEE url(eeGrad2.gif) bottom repeat-x; 
} 
/* do not edit – this enables the new month combobox selector */ 
.jCal .monthSelector { 
position:absolute; 
} 
/* do not edit – this enables the new month combobox selector "shadow" for capturing auto-hide */ 
.jCal .monthSelectorShadow { 
position:absolute; 
background:#808080; 
padding:0px; 
} 
/* this is the hover for the month name */ 
.jCal .monthNameHover { 
background:#EDEDED url(double-arrow-vert.gif) center left no-repeat; 
color:#808080; 
} 
/* this is the hover for the year */ 
.jCal .monthYearHover { 
background:#EDEDED url(double-arrow-vert.gif) center right no-repeat; 
color:#808080; 
} 
/* this is the hover for the new month or year hover in the new combobox selection */ 
.jCal .monthSelectHover { 
background:#069; 
color:#FFF; 
} 
/* day block dimensions and style – for all day blocks */ 
.jCalMo .dow, .jCalMo .day, .jCalMo .pday, .jCalMo .aday, .jCalMo .overDay, .jCalMo .invday, .jCalMo .selectedDay { 
width:30px; 
font-family:Tahoma; 
font-size:8pt; 
color:#000000; 
border-right:1px solid #CCC; 
border-bottom:1px solid #CCC; 
border-left:1px solid #EEE; 
text-align:center; 
cursor:default; 
float:left; 
} 
/* day of week header specific style */ 
.jCalMo .dow { 
background:#EEE url(eeGrad.gif) bottom repeat-x; 
border-bottom:0px; 
} 
/* actual calendar day default style */ 
.jCalMo .day, .jCalMo .invday { 
height:30px; 
text-align:center; 
} 
/* selectable calendar day specific style */ 
.jCalMo .day { 
cursor:pointer; 
background:#FFF; 
} 
/* blacked-out calendar day specific style */ 
.jCalMo .invday { 
color:#808080; 
background:#eeeeee; 
text-decoration:line-through; 
} 
/* previous and subsequent months calendar day specific style */ 
.jCalMo .pday, .jCalMo .aday { 
height:30px; 
background:#e3e3e3; 
color:#CCC; 
} 
/* selected day */ 
.jCalMo .selectedDay { 
color:#FFF; 
/* must use rgb() syntax for jquery.color.js compliance */ 
background:rgb(0, 143, 214); 
} 
/* mouseover hilighted selectable day */ 
.jCalMo .overDay { 
color:#FFF; 
/* must use rgb() syntax for jquery.color.js compliance */ 
background:rgb(0, 102, 153); 
} 
/* left month navigation button – no need to change */ 
.jCal .left { 
background:url(_left.gif) center center no-repeat; 
width:16px; 
height:16px; 
vertical-align:middle; 
cursor:pointer; 
float:left; 
} 
/* right month navigation button – no need to change */ 
.jCal .right { 
background:url(_right.gif) center center no-repeat; 
width:16px; 
height:16px; 
vertical-align:middle; 
cursor:pointer; 
float:right; 
} 
/* no need to change – this is for carousel opacity */ 
.jCalMask, .jCalMove { 
position:absolute; 
overflow:hidden; 
}

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>'); 
}