# 加載方式 ## 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 重寫默認值對象。 ```