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.

  1. <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>  

Create calendar using javascript.

  1. <div id="cc" style="width:180px;height:180px;"></div>  
  1. $('#cc').calendar({  
  2.     current:new Date()  
  3. });  

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
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

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());
	}
});

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));