Calendar Class

The default value for this property is null, which causes the calendar to use the default for the current culture.

In the English culture, the first day of the week is Sunday (0); in most European cultures, the first day of the week is Monday (1).

The default value for this property is 'ddd'.

The default value for this property is 'd ' (the space after the 'd' prevents the format from being interpreted as 'd', the standard format used to represent the short date pattern).

The default value for this property is 'MMM'.

The default value for this property is 'yyyy'.

The default value for this property is 'y'.

The default value for this property is true.

The default value for this property is false.

The formatter function can add any content to any date. It allows complete customization of the appearance and behavior of the calendar.

If specified, the function takes two parameters:

• the date being formatted
• the HTML element that represents the date

For example, the code below shows weekends with a yellow background:

calendar.itemFormatter = (date, element) => {
    let day = date.getDay();
    element.style.backgroundColor = (day == 0 || day == 6) ? 'yellow' : '';
}

If specified, the validator function should take one parameter representing the date to be tested, and should return false if the date is invalid and should not be selectable.

For example, the code below shows weekends in a disabled state and prevents users from selecting those dates:

calendar.itemValidator = date => {
    let weekday = date.getDay();
    return weekday != 0 && weekday != 6;
}

The default value for this property is null, which means no latest date is defined.

For details about using the min and max properties, please see the Using the min and max properties topic.

The default value for this property is null, which means no earliest date is defined.

For details about using the min and max properties, please see the Using the min and max properties topic.

The default value for this property is 1.

When you set this property to a value greater than 1, extra child calendars are added to the control displaying consecutive months.

All calendars within the control are synchronized, so changing any property on the main calendar automatically updates all child calendars. This includes the value, rangeEnd, and selectionMode properties.

When multiple months are shown, the main control's host element gets a "wj-calendar-multimonth" class which is used in CSS to switch the display to "flex".

The "flex" container is very versatile. You can limit the width of the outer control and have the months wrap horizontally or vertically, align the months within the main control, align and justify them, etc.

The default value for this property is true.

To enable date range selection, set the selectionMode property to DateSelectionMode.Range.

Once you do that, the selection range will be defined by the value and rangeEnd properties.

If not null, the rangeEnd date must be greater than or equal to the value date, which represents the range start.

This property is used only when the selectionMode property is set to DateSelectionMode.Range.

The default value for this property is 0, which means there is no maximum value for range lengths.

This property is used only when the selectionMode property is set to DateSelectionMode.Range.

The default value for this property is 0, which means there is no minimum value for range lengths.

The default value for this property is true.

The default value for this property is DateSelectionMode.Day.

The default value for this property is true.

The default value for this property is ShowMonthPicker.FirstMonth.

The default value for this property is true.

The default value for this property is the current date.

When editing ranges, the current range is defined by the interval between the value and rangeEnd properties.

Setting the value property automatically resets the rangeEnd property to null, so the user can click the range end value on the calendar to finish a range selection.

Because setting the value property resets rangeEnd, to define a range in code you must set the value first, and then rangeEnd. For example:

// this selects a range from 'start' to 'end':
cal.value = start; // rangeEnd == null
cal.rangeEnd = end; // rangeEnd == 'end'

// **this doesn't work**
cal.rangeEnd = end; // rangeEnd == 'end'
cal.value = start; // rangeEnd == null

The default value for this property is zero.

The default value for this property is zero.