Disables (true) or enables (false) the calendar. Can be set when initialising (first creating) the calendar.

Code example

Set the disabled property.

$("#jqxCalendar").jqxCalendar({ disabled: true });

Get the disabled property.

var disabled = $('#jqxCalendar').jqxCalendar('disabled');

Represents the minimum navigation date.

Code example

Set the min property.

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

Get the min property.

var getMinDate = $('#jqxCalendar').jqxCalendar('getMinDate');

Represents the maximum navigation date.

Code example

Set the max property.

$('#jqxCalendar').jqxCalendar('setMaxDate', new Date(2012, 0, 1));

Get the max property.

var getMaxDate = $('#jqxCalendar').jqxCalendar('getMaxDate');

Represents the calendar`s navigation step when the left or right navigation button is clicked.

Code example

Set the stepMonths property.

$('#jqxCalendar').jqxCalendar({ stepMonths: 2});

Get the stepMonths property.

var stepMonths = $('#jqxCalendar').jqxCalendar('stepMonths');

Sets or gets the width of the Calendar.

Code example

Set the width property.

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

Get the width property.

var width = $('#jqxCalendar').jqxCalendar('width');

Sets or gets the height of the Calendar.

Code example

Set the height property.

$('#jqxCalendar').jqxCalendar({height: '200px' });

Get the height property.

var height = $('#jqxCalendar').jqxCalendar('height');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

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

Get the rtl property.

var rtl = $('#jqxCalendar').jqxCalendar('rtl'); 

Sets or gets the Calendar's value.

Code example

Set the value property.

$("#jqxCalendar").jqxCalendar({ value: $.jqx._jqxDateTimeInput.getDateTime(new Date(2011, 9, 1)) });

Get the value property.

var value = $('#jqxCalendar').jqxCalendar('value'); 

Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.

Code example

Set the firstDayOfWeek property.

$('#jqxCalendar').jqxCalendar({ firstDayOfWeek: 1 });

Get the firstDayOfWeek property.

var firstDayOfWeek = $('#jqxCalendar').jqxCalendar('firstDayOfWeek'); 

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

Code example

Set the showWeekNumbers property.

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

Get the showWeekNumbers property.

var showWeekNumbers = $('#jqxCalendar').jqxCalendar('showWeekNumbers'); 

Sets or gets a value whether the day names are displayed. By default, the day names are displayed.

Code example

Set the showDayNames property.

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

Get the showDayNames property.

var showDayNames = $('#jqxCalendar').jqxCalendar('showDayNames'); 

Sets or gets a value indicating whether weekend persists its view state.

Code example

Set the enableWeekend property.

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

Get the enableWeekend property.

var enableWeekend = $('#jqxCalendar').jqxCalendar('enableWeekend'); 

Determines whether switching between month, year and decade views is enabled.

Code example

Set the enableViews property.

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

Get the enableViews property.

var enableViews = $('#jqxCalendar').jqxCalendar('enableViews'); 

Sets or gets a value indicating whether the other month days are enabled.

Code example

Set the enableOtherMonthDays property.

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

Get the enableOtherMonthDays property.

var enableOtherMonthDays = $('#jqxCalendar').jqxCalendar('enableOtherMonthDays'); 

Sets or gets a value whether the other month days are displayed.

Code example

Set the showOtherMonthDays property.

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

Get the showOtherMonthDays property.

var showOtherMonthDays = $('#jqxCalendar').jqxCalendar('showOtherMonthDays'); 

Determines the animation delay between switching views.

Code example

Set the navigationDelay property.

$('#jqxCalendar').jqxCalendar({ navigationDelay:800});

Get the navigationDelay property.

var navigationDelay = $('#jqxCalendar').jqxCalendar('navigationDelay'); 

Sets or gets the row header width.

Code example

Set the rowHeaderWidth property.

$('#jqxCalendar').jqxCalendar({ rowHeaderWidth:30});

Get the rowHeaderWidth property.

var rowHeaderWidth = $('#jqxCalendar').jqxCalendar('rowHeaderWidth'); 

Sets or gets the Calendar colomn header's height. In the column header are displayed the calendar day names.

Code example

Set the columnHeaderHeight property.

$('#jqxCalendar').jqxCalendar({ columnHeaderHeight: 30 });

Get the columnHeaderHeight property.

var columnHeaderHeight = $('#jqxCalendar').jqxCalendar('columnHeaderHeight'); 

Sets or gets the title height where the navigation arrows are displayed.

Code example

Set the titleHeight property.

$('#jqxCalendar').jqxCalendar({ titleHeight: 40});

Get the titleHeight property.

var titleHeight = $('#jqxCalendar').jqxCalendar('titleHeight'); 

Sets or gets the name format of days of the week.

Possible Values:

'default'

'shortest'

'firstTwoLetters'

'firstLetter'

'full'

Code example

Set the dayNameFormat property.

$('#jqxCalendar').jqxCalendar({ dayNameFormat : 'firstTwoLetters'});

Get the dayNameFormat property.

var dayNameFormat = $('#jqxCalendar').jqxCalendar('dayNameFormat'); 

Sets or gets 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

Code example

Set the titleFormat property.

$('#jqxCalendar').jqxCalendar({ titleFormat: "MMMM yyyy"});

Get the titleFormat property.

var titleFormat = $('#jqxCalendar').jqxCalendar('titleFormat'); 

Sets or gets the calendar in read only state.

Code example

Set the readOnly property.

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

Get the readOnly property.

var readOnly = $('#jqxCalendar').jqxCalendar('readOnly'); 

Sets or gets a value indicating whether the calendar's footer is displayed.

Code example

Set the showFooter property.

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

Get the showFooter property.

var showFooter = $('#jqxCalendar').jqxCalendar('showFooter'); 

Sets or gets the selection mode.

Possible Values:

'none'

'default'

'range'

Code example

Set the selectionMode property.

$('#jqxCalendar').jqxCalendar({ selectionMode: 'range' });

Get the selectionMode property.

var selectionMode = $('#jqxCalendar').jqxCalendar('selectionMode'); 

Sets or gets the 'Today' string displayed when the 'showFooter' property is true.

Code example

Set the todayString property.

$('#jqxCalendar').jqxCalendar({ todayString: 'Today' });

Get the todayString property.

var todayString = $('#jqxCalendar').jqxCalendar('todayString'); 

Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.

Code example

Set the clearString property.

$('#jqxCalendar').jqxCalendar({ clearString: 'Clear' });

Get the clearString property.

var clearString = $('#jqxCalendar').jqxCalendar('clearString'); 

Sets or gets 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

Set the culture property.

$('#jqxCalendar').jqxCalendar({culture: 'en-US' });

Get the culture property.

var culture = $('#jqxCalendar').jqxCalendar('culture'); 

Sets or gets a value indicating whether the fast navigation is enabled.

Code example

Set the enableFastNavigation property.

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

Get the enableFastNavigation property.

var enableFastNavigation = $('#jqxCalendar').jqxCalendar('enableFastNavigation'); 

Sets or gets 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

Set the enableHover property.

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

Get the enableHover property.

var enableHover = $('#jqxCalendar').jqxCalendar('enableHover'); 

Sets or gets 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

Set the enableAutoNavigation property.

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

Get the enableAutoNavigation property.

var enableAutoNavigation = $('#jqxCalendar').jqxCalendar('enableAutoNavigation'); 

Sets or gets a value indicating whether the tool tips are enabled.

Code example

Set the enableTooltips property.

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

Get the enableTooltips property.

var enableTooltips = $('#jqxCalendar').jqxCalendar('enableTooltips'); 

Sets or gets the tooltip text displayed when the mouse cursor is over the back navigation button.

Code example

Set the backText property.

$('#jqxCalendar').jqxCalendar({backText: "Back" });

Get the backText property.

var backText = $('#jqxCalendar').jqxCalendar('backText'); 

Sets or gets the tooltip text displayed when the mouse cursor is over the forward navigation button.EnableTooltips property should be set to true.

Code example

Set the forwardText property.

$('#jqxCalendar').jqxCalendar({forwardText: "Forward" });

Get the forwardText property.

var forwardText = $('#jqxCalendar').jqxCalendar('forwardText'); 

Sets or gets a special date to the Calendar.

Code example

Set the specialDates property.

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

Get the specialDates property.

var specialDates = $('#jqxCalendar').jqxCalendar('specialDates'); 

This event is triggered when the calendar back navigation button is clicked.

Code example

Bind to the backButtonClick event by type: jqxCalendar.

$('#jqxCalendar').on('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.

$('#jqxCalendar').on('nextButtonClick', function (event) { // Some code here. });
                        

This event is triggered when the Calendar's selection is changed.

Code example

Bind to the change event by type: jqxCalendar.

$('#jqxCalendar').on('change', function (event)
{ 
    var jsDate = event.args.date;
    // if the selectionMode is set to 'range'.
    // var range = event.args.range;
    // var rangeFrom = range.from;
    // var rangeTo = range.to;
    // additional properties.
    // var view = event.args.view;
    // var viewFrom = view.from;
    // var viewTo = view.to;
});
                        

This event is triggered when the Calendar's view is changed.

Code example

Bind to the viewChange event by type: jqxCalendar.

$('#jqxCalendar').on('viewChange', function (event) 
{
    var view = event.args.view;
    var viewFrom = view.from;
    var viewTo = view.to;
});
                        

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.

$('#jqxCalendar').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,

$('#jqxCalendar').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.

$('#jqxCalendar ').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. The retuned value is a JavaScript Date object.

var minDate = $('#jqxCalendar').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. The expected parameter is a JavaScript Date Object.

$('#jqxCalendar ').jqxCalendar('setMaxDate', new Date(2012, 0, 1)); 

When the getMaxDate method is called, the user gets the hightest navigation date set to the Calendar. The retuned value is a JavaScript Date object.

Code example

Invoke the getMaxDate method.

var getMaxDate= $('#jqxCalendar').jqxCalendar('getMaxDate'); 

When the setDate method is called, the user sets the current month displayed in the Calendar. The parameter is a JavaScript Date Object.

Code example

Invoke the setDate method.

$('#jqxCalendar ').jqxCalendar('setDate', new Date(2012, 0, 1)); 

When the getDate method is called, the user gets the current month displayed in the Calendar.The returned value is a JavaScript Date Object.

Code example

Invoke the getDate method.

var getDate= $('#jqxCalendar').jqxCalendar('getDate'); 

Sets the selection range when the selectionMode is set to 'range'. The parameters are JavaScript Date Objects.

Code example

Invoke the setRange method.

    var date1 = new Date();
    date1.setFullYear(2012, 7, 7);

    var date2 = new Date();
    date2.setFullYear(2012, 7, 15);
    $("#jqxCalendar").jqxCalendar('setRange', date1, date2);
                        

Gets the selection range when the selectionMode is set to 'range'. The returned value is an object with "from" and "to" fields. Each of these is a JavaScript Date Object.

Code example

Invoke the getRange method.

    var range = $("#jqxCalendar").jqxCalendar('getRange');
    var from = range.from;
    var to = range.to;
                        

Renders the Calendar.

Code example

Invoke the render method.

$("#jqxCalendar").jqxCalendar('render');

Performs a layout and updates the UI.

Code example

Invoke the refresh method.

$("#jqxCalendar").jqxCalendar('refresh');

Focuses the Calendar.

Code example

Invoke the focus method.

$("#jqxCalendar").jqxCalendar('focus');

Sets the Date to Today.

Code examples

Invoke the today method.

$('#jqxCalendar').jqxCalendar('today'); 

Clears the selection.

Code examples

Invoke the clear method.

$('#jqxCalendar').jqxCalendar('clear'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxCalendar').jqxCalendar('destroy'); 

Gets or sets the jqxCalendar's value.

Code examples

Invoke the val method.

// Set Date using Javascript Date param. Sets year = 2013, month = april, day = 3.
$('#jqxCalendar').jqxCalendar('val', new Date(2013, 3, 3));

// Set Date using String param.
$('#jqxCalendar').jqxCalendar('val', "2013/3/3");

// Set Date using jQuery's val.
$('#jqxCalendar').val("2013/3/3");

// Set Date using jQuery's val. Param is JavaScript Date.
$('#jqxCalendar').val(new Date(2013, 3, 3));

// Set Null Date.
$('#jqxCalendar').val(null);

// Set Range when the selectionMode is "range".
$('#jqxCalendar').val("2013/3/3", "2013/3/10");

// Set Range using JavaScript Date.
$('#jqxCalendar').val(new Date(2013, 3, 3), new Date(2013, 3, 10));

// Get Date. The returned value is string.
$('#jqxCalendar').jqxCalendar('val');

// Get Date. The returned value is Javascript Date.
$('#jqxCalendar').jqxCalendar('val', 'date');

// Get Date using jQuery's val. The returned value is string.
$('#jqxCalendar').val();

// Get JavaScript Date using jQuery's val. 
$('#jqxCalendar').val('date');