jqxCalendar API Reference

Name Type Default

backText String Back

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

Try it: backText is set to 'Back'

columnHeaderHeight Number 20

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

Try it: columnHeaderHeight is set to 50

clearString String 'Clear'

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

Try it: clearString is set to 'Clear'

culture String default

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

Try it: culture is set to 'de-DE'

dayNameFormat String 'firstTwoLetters'

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

Try it: dayNameFormat is set to 'firstTwoLetters'

disabled Boolean false

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

Try it: disabled is set to true

enableWeekend Boolean false

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

Try it: enableWeekend is set to true

enableViews Boolean true

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

Try it: enableViews is set to false

enableOtherMonthDays Boolean true

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

Try it: enableOtherMonthDays is set to false

enableFastNavigation Boolean true

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

Try it: enableFastNavigation is set to false

enableHover Boolean true

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

Try it: enableHover is set to false

enableAutoNavigation Boolean true

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

Try it: enableAutoNavigation is set to false

enableTooltips Boolean false

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

Try it: enableTooltips is set to true

forwardText String Forward

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

Try it: forwardText is set to 'Forward'

firstDayOfWeek Number 0

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

Try it: firstDayOfWeek is set to 3

height Number/String null

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

Try it: height is set to '200px'

min Date 1900, 1, 1

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

Try it: min is set to (2013, 0, 1)

max Date 2100, 1, 1

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

Try it: max is set to (2017, 0, 1)

navigationDelay Number 400

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

Try it: navigationDelay is set to 2000

rowHeaderWidth Number 25

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

Try it: rowHeaderWidth is set to 30

readOnly Boolean false

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

Try it: readOnly is set to true

restrictedDates Array []

Sets or gets the calendar's restricted dates. These are dates which cannot be clicked.

Code example

Set the restrictedDates property.

$('#jqxCalendar').jqxCalendar({restrictedDates: dates });

Get the restrictedDates property.

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

Try it: restrictedDates is set to an array of dates

rtl Boolean false

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

Try it: rtl is set to true

stepMonths Number 1

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

Try it: stepMonths is set to 3

showWeekNumbers Boolean true

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

Try it: showWeekNumbers is set to true

showDayNames Boolean true

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

Try it: showDayNames is set to false

showOtherMonthDays Boolean true

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

Try it: showOtherMonthDays is set to false

showFooter Boolean false

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

Try it: showFooter is set to true

selectionMode String 'default'

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

Try it: selectionMode is set to 'range'

specialDates Array new Array()

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

Try it: specialDates is set to 5th/current month/current year

theme String ''

titleHeight Number 25

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

Try it: titleHeight is set to 50

titleFormat Array ["MMMM yyyy", "yyyy", "yyyy"]

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

Try it: titleFormat is set to 'MMMM', 'yyyy', 'yyyy'

todayString String 'Today'

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

Try it: todayString is set to 'Today'

value Date Today

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

Try it: value is set to (2018, 9, 1)

width Number/String null

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

Try it: width is set to '200px'

backButtonClick Event

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

Try it: Bind to the backButtonClick event by type: jqxCalendar.

change Event

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;
    var type = event.args.type; // keyboard, mouse or null depending on how the date was selected.
 
    // 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;
});

Try it: Bind to the change event by type: jqxCalendar.

nextButtonClick Event

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

Try it: Bind to the nextButtonClick event by type: jqxCalendar.

viewChange Event

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

Try it: Bind to the viewChange event by type: jqxCalendar.

clear Method

Clears the selection.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the clear method.

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

Try it: clears the selection in the jqxCalendar.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroys the jqxCalendar.

focus Method

Focuses the Calendar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the focus method.

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

Try it: focus the jqxCalendar.

getMinDate Method

When the getMinDate method is called, the user gets the lowest navigation date set to the Calendar.

Parameter	Type	Description
None

Return Value
Date

Code example

Invoke the getMinDate method. The retuned value is a JavaScript Date object.

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

Try it: gets the minimum date of the jqxCalendar.

getMaxDate Method

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.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the getMaxDate method.

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

Try it: gets the maximum date of the jqxCalendar.

getDate Method

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

Parameter	Type	Description
None

Return Value
Date

Code example

Invoke the getDate method.

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

Try it: gets the date of the jqxCalendar.

getRange Method

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.

Parameter	Type	Description
None

Return Value
Object - object.from and object.to are javascript date objects.

Code example

Invoke the getRange method.


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

Try it: gets the range values of the jqxCalendar.

navigateForward Method

When the navigateForward method is called, the calendar navigates forward with a specific month step(by default 1).

Parameter	Type	Description
months	Number

Return Value
None

Code example

Invoke to the navigateForward method.

$('#jqxCalendar').jqxCalendar('navigateForward', 5);

Try it: navigates forward with 5 months in jqxCalendar.

navigateBackward Method

When the navigateBackward method is called, the calendar navigates backward with a specific month step(by default 1).

Parameter	Type	Description
months	Number

Return Value
None

Code example

Invoke the navigateBackward method,

$('#jqxCalendar').jqxCalendar('navigateBackward', 5);

Try it: navigates backward with 5 months in jqxCalendar.

render Method

Renders the Calendar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the render method.

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

Try it: renders the jqxCalendar.

refresh Method

Performs a layout and updates the UI.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the refresh method.

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

Try it: refresh the jqxCalendar.

setMinDate Method

When the setMinDate method is called, the user sets the lowest date to which it is possible to navigate.

Parameter	Type	Description
date	Date/String

Return Value
None

Code example

Invoke the setMinDate method.

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

Try it: sets the minimum date of the jqxCalendar.

setMaxDate Method

When the setMaxDate method is called, the user sets the hightest date to which it is possible to navigate.

Parameter	Type	Description
date	Date/String

Return Value
None

Code example

Invoke the setMaxDate method. The expected parameter is a JavaScript Date Object.

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

Try it: sets the maximum date of the jqxCalendar.

setDate Method

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

Parameter	Type	Description
date	Date/String

Return Value
None

Code example

Invoke the setDate method.

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

Try it: sets the date of the jqxCalendar.

setRange Method

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

Parameter	Type	Description
date	Date/String
date2	Date/String

Return Value
None

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

Try it: sets the range values of the jqxCalendar.

today Method

Sets the Date to Today.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the today method.

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

Try it: Sets the Date to Today in the jqxCalendar.

val Method

Gets or sets the jqxCalendar's value.

Parameter	Type	Description
date	Date/String(optional)
date2	Date/String(optional)	The end of range when the selectionMode is "range"

Return Value
Date/String - returns date if the passed parameter is "date"

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

Try it: invoke val method of the jqxCalendar.

Properties

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Events

Code example

Code example

Code example

Code example

Methods

Code examples

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code examples

Code examples