## Properties

Name | Type | Default
--- | --- | ---
disabled | Boolean | false
Disables (true) or enables (false) the calendar. Can be set when initialising (first creating) the calendar. #### Code example Initialize a calendar with the `disabled` property specified.
    $("#Calendar").jqxCalendar({ disabled: true });
minDate | Date | 1900, 1, 1
Represents the minimum navigation date. #### Code example Initialize a calendar with the `minDate` property specified.
    $('#Calendar').jqxCalendar('setMinDate', new Date(2000, 0, 1));
maxDate | Date | 2100, 1, 1
Represents the maximum navigation date. #### Code example Initialize a calendar with the `maxDate` property specified.
    $('#Calendar').jqxCalendar('setMaxDate', new Date(2012, 0, 1));
stepMonths | Number | 1
Represents the calendar`s navigation step when the left or right navigation button is clicked. #### Code example Initialize a calendar with the `stepMonths` property specified.
    $('#Calendar').jqxCalendar({ stepMonths: 2, width: '250px', height: '250px'});
width | Number/String | null
Sets the width of the Calendar. #### Code example Initialize a calendar with the `width` property specified.
    $('#Calendar').jqxCalendar({ width: '250px', height: '250px' });
height | Number/String | null
Sets the height of the Calendar. #### Code example Initialize a calendar with the `height` property specified.
    $('#Calendar').jqxCalendar({ width: '250px', height: '200px' });
value | Date | Today
Sets the Calendar's value. #### Code example Initialize a calendar with the `value` property specified.
    $('#Calendar').jqxCalendar({ width: '250px', height: '200px' });
    $("#jqxWidget").jqxCalendar({ value: $.jqx._jqxDateTimeInput.getDateTime(new Date(2011, 9, 1)) });
firstDayOfWeek | Number | 0
Sets which day to display in the first day column. By default the calendar displays 'Sunday' as first day. #### Code example Initialize a calendar with the `firstDayOfWeek` property specified.
    $('#Calendar').jqxCalendar({ firstDayOfWeek: 1 });
showWeekNumbers | Boolean | true
Sets a value whether the week`s numbers are displayed. #### Code example Initialize a calendar with the `showWeekNumbers` property specified.
    $('#Calendar').jqxCalendar({ showWeekNumbers: false });
showDayNames | Boolean | true
Sets a value whether the day names are displayed. By default, the day names are displayed. #### Code example Initialize a calendar with the `showDayNames` property specified.
    $('#Calendar').jqxCalendar({ showDayNames: false });
enableWeekend | Boolean | false
Sets a value indicating whether weekend persists its view state. #### Code example Initialize a calendar with the `enableWeekend` property specified.
    $('#Calendar').jqxCalendar({ enableWeekend: true });
enableOtherMonthDays | Boolean | true
Sets a value indicating whether the other month days are enabled. #### Code example Initialize a calendar with the `enableOtherMonthDays` property specified.
    $('#Calendar').jqxCalendar({ enableOtherMonthDays: false });
showOtherMonthDays | Boolean | true
Sets a value whether the other month days are displayed. #### Code example Initialize a calendar with the `showOtherMonthDays` property specified.
    $('#Calendar').jqxCalendar({ showOtherMonthDays: false });
rowHeaderWidth | Number | 25
Sets the row header width. #### Code example Initialize a calendar with the `rowHeaderWidth` property specified.
    $('#Calendar').jqxCalendar({ rowHeaderWidth:30, width: '250px', height: '250px'});
columnHeaderHeight | Number | 20
Sets the Calendar colomn header's height. In the column header are displayed the calendar day names. #### Code example Initialize a calendar with the `columnHeaderHeight` property specified.
    $('#Calendar').jqxCalendar({ columnHeaderHeight: 30, width: '250px', height:'250px' });
titleHeight | Number | 25
Sets the title height where the navigation arrows are displayed. #### Code example Initialize a calendar with the `titleHeight` property specified.
    $('#Calendar').jqxCalendar({ titleHeight: 40, width: '250px', height: '250px'});
dayNameFormat | String | 'firstTwoLetters'
Sets the name format of days of the week. Possible values: 'default', 'shortest', 'firstTwoLetters', 'firstLetter', 'full'. #### Code example Initialize a calendar with the `dayNameFormat` property specified.
    $('#Calendar').jqxCalendar({ dayNameFormat : 'firstTwoLetters'});
titleFormat | String | MMMM yyyy
Sets the title format for the title section. Possible values: "d"-the day of the month; "dd"-the day of the month; "ddd"-the abbreviated name of the day of the week; "dddd"- the full name of the day of the week; "h"-the hour, using a 12-hour clock from 1 to 12; "hh"-the hour, using a 12-hour clock from 01 to 12; "H"-the hour, using a 24-hour clock from 0 to 23; "HH"- the hour, using a 24-hour clock from 00 to 23; "m"-the minute, from 0 through 59; "mm"-the minutes,from 00 though59; "M"- the month, from 1 through 12; "MM"- the month, from 01 through 12; "MMM"-the abbreviated name of the month; "MMMM"-the full name of the month; "s"-the second, from 0 through 59; "ss"-the second, from 00 through 59; "t"- the first character of the AM/PM designator; "tt"-the AM/PM designator; "y"- the year, from 0 to 99; "yy"- the year, from 00 to 99; "yyy"-the year, with a minimum of three digits; "yyyy"-the year as a four-digit number; "yyyyy"-the year as a four-digit number. #### Code example Initialize a calendar with the `titleFormat` property specified.
    $('#Calendar').jqxCalendar({ titleFormat: "MMMM yyyy"});
readOnly | Boolean | false
Sets the calendar in read only state. #### Code example Initialize a calendar with the `readOnly` property specified.
    $('#Calendar').jqxCalendar({readOnly: true });
showFooter | Boolean | false
Sets a value indicating whether the calendar's footer is displayed. #### Code example Initialize a calendar with the `showFooter` property specified.
    $('#Calendar').jqxCalendar({ showFooter: true });
selectionMode | Boolean | 'default'
Sets the selection mode. The possible values are: 'none', 'default' and 'range'. #### Code example Initialize a calendar with the `selectionMode` property specified.
    $('#Calendar').jqxCalendar({ selectionMode: true });
todayString | Boolean | 'Today'
Sets the 'Today' string displayed when the 'showFooter' property is true. #### Code example Initialize a calendar with the `todayString` property specified.
    $('#Calendar').jqxCalendar({ todayString: 'Today' });
clearString | Boolean | 'Clear'
Sets the 'Clear' string displayed when the 'showFooter' property is true. #### Code example Initialize a calendar with the `clearString` property specified.
    $('#Calendar').jqxCalendar({ clearString: 'Clear' });
culture | String | default
Sets the jqxCalendar's culture. The culture settings are contained within a file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. To set the culture, you need to include the jquery.glob.de-DE.js and set the culture property to the culture's name, e.g. 'de-DE'. #### Code example Initialize a calendar with the `culture` property specified.
    $('#Calendar').jqxCalendar({culture: 'en-US' });
enableFastNavigation | Boolean | true
Sets a value indicating whether the fast navigation is enabled. #### Code example Initialize a calendar with the `enableFastNavigation` property specified.
    $('#Calendar').jqxCalendar({ enableFastNavigation: false });
enableHover | Boolean | true
Sets a value indicating whether the hover state is enabled. The hover state is activated when the mouse cursor is over a calendar cell. The hover state is automatically disabled when the calendar is displayed in touch devices. #### Code example Initialize a calendar with the `enableHover` property specified.
    $('#Calendar').jqxCalendar({enableHover: false });
enableAutoNavigation | Boolean | true
Sets a value indicating whether the auto navigation is enabled. When this property is true, click on other month date will automatically navigate to the previous or next month. #### Code example Initialize a calendar with the `enableAutoNavigation` property specified.
    $('#Calendar').jqxCalendar({enableAutoNavigation: false });
enableTooltips | Boolean | false
Sets a value indicating whether the tool tips are enabled. #### Code example Initialize a calendar with the `enableTooltips` property specified.
    $('#Calendar').jqxCalendar({enableToolTips: false });
backText | String | Back
Sets the tooltip text displayed when the mouse cursor is over the back navigation button. #### Code example Initialize a calendar with the `backText` property specified.
    $('#Calendar').jqxCalendar({backText: "Back" });
forwardText | String | Forward
Sets the tooltip text displayed when the mouse cursor is over the forward navigation button. #### Code example Initialize a calendar with the `forwardText` property specified.
    $('#Calendar').jqxCalendar({forwardText: "Forward" });
specialDates | String | new Array()
#### Code example Add a special date to the Calendar.
    $("#jqxWidget").jqxCalendar('addSpecialDate', new Date(2011, 6, 29));
## Events
backButtonClick | Event |
This event is triggered when the calendar back navigation button is clicked. #### Code example Bind to the backButtonClick event by type: jqxCalendar.
    $('#Calendar').bind('backButtonClick', function () { // Some code here. });
nextButtonClick | Event |
This event is triggered when the calendar next navigation button is clicked. #### Code example Bind to the nextButtonClick event by type: jqxCalendar.
    $('#Calendar').bind('nextButtonClick', function () { // Some code here. });
valuechanged | Event |
This event is triggered when the Calendar's value property is changed. #### Code example Bind to the valuechanged event by type: jqxCalendar.
    $('#Calendar').bind('valuechanged', function () { // Some code here. });
cellMouseDown | Event |
This event is triggered when the cell mouse down is clicked. #### Code example Bind to the cellMouseDown event by type: jqxCalendar.
    $('#Calendar').bind('cellMouseDown', function () { // Some code here. });
cellMouseUp | Event |
This event is triggered when the cell mouse up is clicked. #### Code example Bind to the cellMouseUp event by type: jqxCalendar.
    $('#Calendar').bind('cellMouseUp', function () { // Some code here. });
cellSelected | Event |
This event is triggered when the cell is selected. #### Code example Bind to the cellSelected event by type: jqxCalendar.
    $('#Calendar').bind('cellSelected', function () { // Some code here. });
cellUnselected | Event |
This event is triggered when the cell is unselected. #### Code example Bind to the cellUnselected event by type: jqxCalendar.
    $('#Calendar').bind('cellUnselected', function () { // Some code here. });
## Methods
navigateForward | Method |
When the navigateForward method is called, the calendar navigates forward with a specific month step(by default 1). #### Code example Invoke to the navigateForward method.
    $('#Calendar').jqxCalendar('navigateForward', 5);
navigateBackward | Method |
When the navigateBackward method is called, the calendar navigates backward with a specific month step(by default 1). #### Code example Invoke the navigateBackward method,
    $('#Calendar').jqxCalendar('navigateBackward', 5);
setMinDate | Method |
When the setMinDate method is called, the user sets the lowest date to which it is possible to navigate. #### Code example Invoke the setMinDate method.
    $('#Calendar ').jqxCalendar('setMinDate', new Date(2008, 0, 1));
getMinDate | Method |
When the getMinDate method is called, the user gets the lowest navigation date set to the Calendar. #### Code example Invoke the getMinDate method.
    var minDate = $('#Calendar').jqxCalendar('getMinDate');
setMaxDate | Method |
When the setMaxDate method is called, the user sets the hightest date to which it is possible to navigate. #### Code example Invoke the setMaxDate method.
    $('#Calendar ').jqxCalendar('setMaxDate', new Date(2012, 0, 1));
getMaxDate | Method |
When the getMaxDate method is called, the user gets the hightest navigation date set to the Calendar. #### Code example Invoke the getMaxDate method.
    var getMaxDate= $('#Calendar').jqxCalendar('getMaxDate');
setDate | Method |
When the setDate method is called, the user sets the current month displayed in the Calendar.. #### Code example Invoke the setDate method.
    $('#Calendar ').jqxCalendar('setDate', new Date(2012, 0, 1));
getDate | Method |
When the getDate method is called, the user gets the current month displayed in the Calendar. #### Code example Invoke the getDate method.
    var getDate= $('#Calendar').jqxCalendar('getDate');
setRange | Method |
Sets the selection range when the selectionMode is set to 'range'. #### Code example Invoke the getDate method.
    var date1 = new Date();
    date1.setFullYear(2012, 7, 7);

    var date2 = new Date();
    date2.setFullYear(2012, 7, 15);
    $("#Calendar").jqxCalendar('setRange', date1, date2);
getRange | Method |
Gets the selection range when the selectionMode is set to 'range'. #### Code example Invoke the getDate method.
    var range = $("#Calendar").jqxCalendar('getRange');
    var from = range.from;
    var to = range.to;