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

Represents the minimum navigation date.

Code example

Initialize a calendar with the minDate property specified.

$('#Calendar').jqxCalendar('setMinDate', new Date(2000, 0, 1));

Represents the maximum navigation date.

Code example

Initialize a calendar with the maxDate property specified.

$('#Calendar').jqxCalendar('setMaxDate', new Date(2012, 0, 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'});

Sets the width of the Calendar.

Code example

Initialize a calendar with the width property specified.

$('#Calendar').jqxCalendar({ width: '250px', height: '250px' });

Sets the height of the Calendar.

Code example

Initialize a calendar with the height property specified.

$('#Calendar').jqxCalendar({ width: '250px', height: '200px' });

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

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

Sets a value whether the week`s numbers are displayed.

Code example

Initialize a calendar with the showWeekNumbers property specified.

$('#Calendar').jqxCalendar({ showWeekNumbers: false });

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

Sets a value indicating whether weekend persists its view state.

Code example

Initialize a calendar with the enableWeekend property specified.

$('#Calendar').jqxCalendar({ enableWeekend: 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 });

Sets a value whether the other month days are displayed.

Code example

Initialize a calendar with the showOtherMonthDays property specified.

$('#Calendar').jqxCalendar({ showOtherMonthDays: false });

Sets the row header width.

Code example

Initialize a calendar with the rowHeaderWidth property specified.

$('#Calendar').jqxCalendar({ rowHeaderWidth:30, width: '250px', height: '250px'});

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

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

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

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

Sets the calendar in read only state.

Code example

Initialize a calendar with the readOnly property specified.

$('#Calendar').jqxCalendar({readOnly: true });

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

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

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

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

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

Sets a value indicating whether the fast navigation is enabled.

Code example

Initialize a calendar with the enableFastNavigation property specified.

$('#Calendar').jqxCalendar({ enableFastNavigation: false });

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

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

Sets a value indicating whether the tool tips are enabled.

Code example

Initialize a calendar with the enableTooltips property specified.

$('#Calendar').jqxCalendar({enableToolTips: false });

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

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

Code example

Add a special date to the Calendar.

$("#jqxWidget").jqxCalendar('addSpecialDate', new Date(2011, 6, 29)); 

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

                        

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

                        

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

                        

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

                        

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

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

                        

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

                        

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

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

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

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

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

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

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

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

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

                        

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;