[code]

$('#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']//月份的简写

})

[/code]

图片展示：

JS引用代码：

[js]

$(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());

}

});

});

[/js]

HTML代码：

[html]

[/html]

CSS代码：

[css][/css]

CSS源代码如下：

[css]

/* 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;

}

[/css]