# 加载方式 ## Class加载 ``` <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div> ``` ## JS调用加载 ``` <div id="box"></div> <script> $(function () { //JS 加载调用 $('#box').calendar({ }); }); </script> ``` # 属性列表 | 属性名 | 值 | 说明 | | --- | --- | | width | number | 日历控件宽度。默认值180。| | height | number | 日历控件高度。默认值180。| | fit | boolean| 当设置为 true 的时候，将设置日历控件大小自适应父容器。默认值 false。| | border | boolean | 定义是否显示边框。默认值 true。| | firstDay | number | 定义一周的第一天是星期几。0=星期日、1=星期一 等。| | weeks | array | 显 示 的 周 列 表 内 容 。 默 认 值 ：['S','M','T','W','T','F','S']| | months| array | 显示的月列表内容。默认值：['Jan','Feb', 'Mar', 'Apr', 'May','Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec']| | year | number | 年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。| | month | number | 月日历。| | current | date | 当前日期| | formatter| date | 格式化日期 | | styler | date | 设置指定日期的样式v | validator | date 设置指定日期是否可以选择 | *** ``` <script> $(function () { //JS 加载调用 $('#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 : 2016, month : 6, current : new Date(2016,12,17), }); }); </script>` ``` # 事件列表 | 事件名 | 事件属性 | 说明| | --- | --- | | onSelect | date | 在用户选择一天的时候触发。| | onChange | newDate, oldDate | 在用户改变选择的时候触发。| *** ``` <script> $(function () { //JS 加载调用 $('#box').calendar({ width : 200, height : 200, onSelect : function (date) { alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate()); }, onChange : function (newDate, oldDate) { alert(newDate + '|' + oldDate); }, }); }); </script> ``` # 方法列表 | 方法名 | 传参 | 说明 | | --- | --- | | options| none | 返回参数对象。| | resize | none | 调整日历大小。 | | moveTo | date | 移动日历到指定日期。| *** ``` //返回属性对象 console.log($('#box').calendar('options')); //调整日历大小 $('#box').calendar('resize'); //移动到指定日期 $('#box').calendar('moveTo', new Date(2015,1,1)); //可以使用$.fn.calendar.defaults 重写默认值对象。 ```