Calendar
Override defaults with $.fn.calendar.defaults.
The calendar display one month calendar that allows the user to select dates and move to the next or previous month. By default, the first day of week is set to sunday. It can be changed by setting the value of 'firstDay' property.
Usage Example
Create calendar from markup.
Create calendar using javascript.
Properties
| Name | Type | Description | Default |
|---|---|---|---|
| width | number | The width of calendar component. | 180 |
| height | number | The height of calendar component. | 180 |
| fit | boolean | When true to set the calendar size fit it's parent container. | false |
| border | boolean | Defines if to show the border. | true |
| showWeek | boolean | Defines if to show the week numbers. Available since version 1.5. | false |
| weekNumberHeader | string | The label to display on the week number header. Available since version 1.5. | |
| getWeekNumber | function(date) | The function to return the week number. Available since version 1.5. | |
| firstDay | number | Defines the first day of week. Sunday is 0, Monday is 1, ... | 0 |
| weeks | array | The list of week to be showed. | ['S','M','T','W','T','F','S'] |
| months | array | The list of month to be showed. | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
| year | number |
The year of calendar.
The example below shows how to create a calendar using the specified year and month.
<div class="easyui-calendar" data-options="year:2012,month:6" /> |
current year(four digits) |
| month | number | The month of calendar. | current month, start with 1 |
| current | Date | The current date. | current date |
| formatter | function(date) |
The day formatter function, return the day value.
Available since version 1.3.6.
Code example:
$('#cc').calendar({
formatter: function(date){
return date.getDate();
}
})
|
|
| styler | function(date) |
The styler function for calendar days, return the inline style or CSS class.
Available since version 1.3.6.
Code example:
$('#cc').calendar({
styler: function(date){
if (date.getDay() == 1){
return 'background-color:#ccc';
// the function can return predefined css class and inline style
// return {class:'r1', style:{'color:#fff'}};
} else {
return '';
}
}
})
|
|
| validator | function(date) |
The validator function that is used to determine if a calendar day can be selected,
return false to prevent from selecting a day.
Available since version 1.3.6.
Code example:
$('#cc').calendar({
validator: function(date){
if (date.getDay() == 1){return true;}
else {return false;}
}
})
|
Events
| Name | Parameters | Description |
|---|---|---|
| onSelect | date |
Fires when user select a date.
Code example:
$('#cc').calendar({
onSelect: function(date){
alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
}
});
|
| onChange | newDate, oldDate | Fires when change a date. Available since version 1.3.6. |
| onNavigate | year, month | Fires when navigate the years and months. |
Methods
| Name | Parameter | Description |
|---|---|---|
| options | none | Return the options object. |
| resize | none | Resize the calendar size. |
| moveTo | date |
Move the calendar to specified date.
Code example:
$('#cc').calendar('moveTo', new Date(2012, 6, 1));
|