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.

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