本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法，这个组件不依赖于其
他组件。
一． 加载方式
//class 加载方式
<div id="box" class="easyui-calendar"
style="width:200px;height:200px;"></div>
//JS 加载调用
$('#box').calendar({
});
二．属性列表
//属性设置
$('#box').calendar({
width : 200,
height : 200,
fit : false,
border : false,
firstDay : 0,
weeks : ['S','M','T','W','T','F','S'],
months : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'],
year : 2012,
month : 6,
current : new Date(2014,7,1),
formatter : function (date) {
return '#' + date.getDate();
},
styler : function (date) {
if (date.getDay() == 1) {
return 'background-color:#ccc';
}
},
validator : function (date) {
if (date.getDay() == 1) {
return true;
} else {
return false;
}
},
});
三．事件列表
//事件列表
$('#box').calendar({
onSelect : function (date) {
alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":"
+ date.getDate());
},
onChange : function (newDate, oldDate) {
alert(newDate + '|' + oldDate);
},
});
四．方法列表
//返回属性对象
console.log($('#box').calendar('options'));
//调整日历大小
$('#box').calendar('resize');
//移动到指定日期
$('#box').calendar('moveTo', new Date(2015,1,1));
PS：我们可以使用$.fn.calendar.defaults 重写默认值对象。