jQuery EasyUI Form Plugin - Calendar
Override default defaults with $.fn.calendar.defaults.
The Calendar displays a month view that allows users to select dates and navigate to the previous or next month. By default, the first day of the week is set to Sunday. This can be changed by setting the value of the 'firstDay' attribute.
Usage
Create a Calendar from markup.
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
Create a Calendar using JavaScript.
<div id="cc" style="width:180px;height:180px;"></div>
$('#cc').calendar({
current: new Date()
});
Properties
| Name | Type | Description | Default Value |
|---|---|---|---|
| width | number | The width of the Calendar component. | 180 |
| height | number | The height of the Calendar component. | 180 |
| fit | boolean | When set to true, adjusts the Calendar's size to fit its parent container. | false |
| border | boolean | Defines whether to display a border. | true |
| firstDay | number | Defines the first day of the week. Sunday is 0, Monday is 1, ... | 0 |
| weeks | array | The list of weeks to display. | ['S','M','T','W','T','F','S'] |
| months | array | The list of months to display. | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
| year | number | The year of the Calendar. Example: <div class="easyui-calendar" data-options="year:2012,month:6" /> | Current year (4 digits) |
| month | number | The month of the Calendar. | Current month (starting from 1) |
| current | Date | The current date. | Current date |
Events
| Name | Parameters | Description |
|---|---|---|
| onSelect | date | Triggered when a user selects a date. <br>Example: $('#cc').calendar({<br> onSelect: function(date){<br> alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());<br> }<br>}); |
Methods
| Name | Parameters | Description |
|---|---|---|
| options | none | Returns the options object. |
| resize | none | Resizes the Calendar. |
| moveTo | date | Moves the Calendar to a specified date. <br>Example: $('#cc').calendar('moveTo', new Date(2012, 6, 1)); |