Configuration

Calendar modes

Calendar supports several display modes. Set the mode property to choose one:

• "calendar" - the default mode. The calendar shows the current date (year and month).

const calendar = new dhx.Calendar("calendar_container");

• "month" - the calendar shows only months of the current year.

const calendar = new dhx.Calendar("calendar_container", {
    mode: "month"
});

• "year" - the calendar shows only years, including the current one.

const calendar = new dhx.Calendar("calendar_container", {
    mode: "year"
});

Related sample: Calendar. Calendar modes

Call the showDate() method to show the calendar in one of the modes.

Controls

You can add a toolbar with quick actions to the calendar via the controls property. By default, the calendar does not render the toolbar.

Related sample: Calendar. Controls configuration

Adding controls

To render the default set of controls, set the property to true:

const calendar = new dhx.Calendar("calendar_container", {
    controls: true // the same as controls: ["spacer", "clear", "today"]
});

To choose the controls and their order, pass an array of control names. The names are case-insensitive, and the calendar ignores unknown names:

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

Available controls

You can use 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, which is equivalent to setting timePicker: true.
• "spacer" - fills in the empty space between the elements of the toolbar.

The calendar renders the "clear", "today" and "timepicker" controls as buttons with the "link" view, the same look that the view property gives to a Toolbar or Form button. The "spacer" control is a layout element that works like the Toolbar spacer.

Timepicker as a control

You can add a timepicker either through the controls array or through the timePicker property. Listing the "timepicker" control enables the timePicker property as well, which keeps the time selection view available and renders the timepicker once even if you use both ways.

Position of the controls

The calendar places the controls in the toolbar from left to right in the order you list them in the array, and puts a timepicker that the timePicker property enables at the beginning of the toolbar.

A single control, except for a spacer, stretches to the full width of the calendar. If the toolbar contains several controls and no spacer, the controls keep their own width and line up on the left. Use the "spacer" control to push the controls that follow it to the right edge.

You can combine the controls in different ways to get the desired layout of the toolbar. For example:

Labels of the controls

The "clear" and "today" buttons take their labels from the calendar locale, where you can translate them, see the Localization article for details.

Date format

Set the dateFormat property to specify the date format in the calendar. The default format is "%d/%m/%y". The API reference lists all characters available for formats.

const calendar = new dhx.Calendar("calendar_container", {
   dateFormat:"%d.%m.%Y"
});

Related sample: Calendar. Date format

Disabled dates

Related sample: Calendar. Marked and disabled dates

The disabledDates setting accepts a function that takes a date as a parameter and returns a boolean value. The calendar dims every date for which the function returns true.

const calendar = new dhx.Calendar("calendar_container", {
    disabledDates: function(date) {
        const disabled = {
            0: true,
            1: true,
            2: false,
            3: false,
            4: false,
            5: false,
            6: true
        }
        return disabled[date.getDay()];
    },
    css: "dhx_widget--bordered"
});

Displaying only current month

Related sample: Calendar. The days of this month only

A default calendar shows both the days of the current month and several days of the previous and next months. Set the thisMonthOnly configuration property to true to show only the current month:

const calendar = new dhx.Calendar("calendar_container", {
    thisMonthOnly:true
});

Highlighted dates

Related sample: Calendar. Marked and disabled dates

Set the mark property to highlight dates in the calendar. The property takes a function that receives a date and returns a string. Return the name of a CSS class to mark the date, or an empty string to leave it unmarked.

const calendar = new dhx.Calendar("calendar_container", {
    mark: function(date) {
        if (date.getDay() === 6) {
            return "highlight-date";
        }
    },
    css: "dhx_widget--bordered"
});

Where highlight-date is a CSS class like this:

<style>
    .highlight-date {
        color: #fff;
    }
</style>

Initial calendar date

The default view is the month that contains the current date. To open a different date, set the date property. The property accepts a Date object as a value. Its default equals value; if you do not specify value, the calendar shows the current date.

const calendar = new dhx.Calendar("calendar_container", {
    date: new Date(2019, 0, 1)
});

Related sample: Calendar. Date initialization

Initially selected date

To create a calendar with an initially selected date, set the value property in the configuration object. The property can accept a value in several formats:

• A Date object
• A string
• An array of Date values for the range mode
• An array of string values for the range mode

// selects a date
const calendar = new dhx.Calendar("calendar_container", {
    value: new Date(2019,01,10)
});

// selects a date as an array of Date value
const calendar = new dhx.Calendar("calendar_container", {
    value: [new Date(2019,01,10)]
});

// selects a date as a string
const calendar = new dhx.Calendar("calendar_container", {
    value: ("10/02/19")
});

// selects a date as an array of string value
const calendar = new dhx.Calendar("calendar_container", {
    value: (["10/02/19"])
});

// selects dates as an array of Date values(for the range mode)
const calendar = new dhx.Calendar("calendar_container", {
    value: ([new Date(2019,05,03), new Date(2019,05,19)]),
    range: true  
});

// selects dates as an array of string values(for the range mode)
const calendar = new dhx.Calendar("calendar_container", {
    value: (["03/06/19", "15/06/19"]),
    range: true  
});

Related sample: Calendar. Value initialization

The calendar highlights the specified date with a round blue marker. No date is selected initially.

note

The dateFormat option defines the date format in the Calendar. Check that you set the same date format both in the value and in the dateFormat property. Otherwise, the calendar uses the default format ("%d/%m/%y").

Numbers of weeks

Related sample: Calendar. Numbers of weeks

To display week numbers in the calendar, enable the weekNumbers property. The property defaults to false.

const calendar = new dhx.Calendar("calendar_container", {
    weekNumbers: true
});

Range mode

Related sample: Calendar. Range

You can create a calendar in the range mode that allows you to select a range of dates. Use the range:true option in the calendar configuration object and define an array with the start and end dates of the range.

const calendar = new dhx.Calendar("calendar_container", {
    css: "dhx_widget--bordered",
    range: true,
    value: ["25/06/20", "07/07/20"]
});

note

The value option must be an array that contains a pair of values (either Date values or string values) for both dates.

Start of the week

Related sample: Calendar. Week start

The default first day of the week is Sunday (weekStart:"sunday"). You can also set Monday as the first day of the week. Apply "monday" as the value of the weekStart setting:

const calendar = new dhx.Calendar("calendar_container", {
    weekStart: "monday"
});

Timepicker

Enable the timePicker property to add a timepicker to a calendar. You can also add the timepicker as the "Timepicker" entry of the controls property. The default timepicker format is 24-hour. Set the timeFormat property to switch to the 12-hour format. The property accepts either 12 or 24 to select the time format.

const calendar = new dhx.Calendar("calendar_container", {
    timePicker: true,
    timeFormat: 12 // the 12-hour format for the timepicker
});

Related sample: Calendar. Timepicker In Calendar

Related sample: Calendar. Time format

Width of calendar

Related sample: Calendar. Calendar width

Set the width configuration property to change the calendar width. The default Calendar width is 250px.

const calendar = new dhx.Calendar("calendar_container", {
    width: "400", 
    css: "dhx_widget--bordered"
});