controls

Optional. Adds a toolbar with the Clear, Today, and Timepicker controls to the calendar

Usage

type TCalendarControls = "clear" | "today" | "timepicker" | "spacer";

interface ICalendarConfig {
    ...
    controls?: boolean | TCalendarControls[];
    ...
}

Default config

controls: false

The property takes either a boolean value or an array of control names:

true	renders the default set of controls, which is equal to ["spacer", "clear", "today"]
false	the calendar renders no controls and adds no related markup to the DOM. The same applies when you do not specify the property. A timepicker that the timePicker property enables still appears
array	renders the listed controls in the order you specify

The array can include the following controls:

"clear"	resets the selected date
"today"	sets the selected date to today and navigates the calendar to the current month. If the calendar has a timepicker, the selected time stays the same
"timepicker"	shows the current time and opens the time selection view. It is equivalent to setting timePicker: true
"spacer"	fills in the empty space between the elements of the toolbar

The names of controls are case-insensitive, so the calendar treats "today", "Today" and "TODAY" as the same control and ignores unknown names.

note

Listing the "timepicker" control enables the timePicker property as well, so the calendar renders the timepicker once even if you use both ways.

Example

// renders the default set of controls
const calendar = new dhx.Calendar("calendar_container", {
    controls: true
});

// renders the "Today" button only
const calendar = new dhx.Calendar("calendar_container", {
    controls: ["today"]
});

// renders the timepicker together with the default set of controls
const calendar = new dhx.Calendar("calendar_container", {
    timePicker: true,
    controls: true
});

// adds the timepicker via the controls array
const calendar = new dhx.Calendar("calendar_container", {
    controls: ["timepicker", "spacer", "clear", "today"]
});

// renders the timepicker once, though it is enabled in two ways
const calendar = new dhx.Calendar("calendar_container", {
    timePicker: true,
    controls: ["timepicker", "today"]
});

// the names of controls are case-insensitive
const calendar = new dhx.Calendar("calendar_container", {
    controls: ["TODAY", "Clear", "Spacer"]
});

Related sample: Calendar. Controls configuration

Related article: Controls

Change log:

added in v9.4