Configuration

Calendar modes

There are several modes of displaying Calendar, which are set via the view configuration property:

  • "calendar" - the default mode. The current date (year and month) is shown in the calendar
var calendar = new dhx.Calendar("calendar_container");

Calendar mode

  • "month" - only months of the current year are shown in the calendar
var calendar = new dhx.Calendar("calendar_container", {
    view: "month"
});

Month mode

  • "year" - only years are shown, including the current one
var calendar = new dhx.Calendar("calendar_container", {
    view: "year"
});

Year mode

Related sample:  Calendar modes - DHTMLX Calendar

You can also show the calendar in one of the modes using the showDate method.

Range mode

You have a possibility to create a calendar in the range mode that allows you to select a range of dates in the calendar. To do this, you need to use the range:true option in the calendar configuration object and define an array with the start and end dates of the range.

var calendar = new dhx.Calendar("calendar", {
    css: "dhx_widget--bordered",
    range: true,
    value: ["03/06/19", "15/06/19"]
});

Range mode

Related sample:  Range - DHTMLX Calendar

The value option should have the array type and contain a pair of values (either Date values or string values) for both dates.

Date format

There is a possibility to specify the format of dates in the calendar via the dateFormat property. The default format is "%d/%m/%y". The full list of available characters used to make formats is provided in the API reference.

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

Related sample:  Date Format - DHTMLX Calendar

Initially selected date

If you want to create a calendar with an initially selected date, set the value property in the configuration object. It accepts a Date object as a value. The specified date will be highlighted with a round blue marker in the calendar. By default, no date is selected initially.

var calendar = new dhx.Calendar("calendar_container", {
    value: new Date(2019,1,10)
});

Initial calendar date

By default, a calendar shows a month with the current date. If for some reason you want to open some other date, set the date property. It accepts a Date object as a value. It is either the same as value (by default), or shows the current date if value is not specified.

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

Start of the week

By default, the first day of the week is Sunday, as the weekStart:"sunday" configuration option is used. It is also possible to set Monday as the start of the week, by applying "monday" as a value of the weekStart setting:

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

Start of the week

Numbers of weeks

If you want to display the numbers of weeks in the calendar, enable the weekNumbers property. By default, the numbers are not shown as the property is set to false.

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

Week numbers

Related sample:  Numbers of weeks - DHTMLX Calendar

Timepicker

You can add a timepicker into a calendar by enabling the timePicker property. By default, a timepicker uses the 24-hour format. You can change it to the 12-hour format via the timeFormat property. It accepts either 12 or 24 value to select the desired time format.

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


Timepicker format

Related sample:  Timepicker in Calendar - DHTMLX Calendar

Related sample:  Time format - DHTMLX Calendar

Disabled dates

To disable certain dates, use the block setting. The value of the property must be a function that takes a date as a parameter and returns a boolean value. The dates, for which the function returns true, are dimmed in the calendar.

In the code snippet below dates from July 9, 2019 to July 12, 2019 are blocked:

var block = [new Date(2019,6,8), new Date(2019,6,13)];
 
var calendar = new dhx.Calendar("calendar_container",{
    block : function(date) {
        return date > block[0] && date < block[1];
    }
});

Blocked dates

Related sample:  Blocked dates - DHTMLX Calendar

Highlighted dates

You can highlight certain dates in the calendar. Set the mark property for that. The value of the property must be a function that takes a date as a parameter and returns a string with the name of a CSS class for marked dates or an empty string for other dates.

var calendar = new dhx.Calendar("calendar_container", {
    mark : d => d.getDate() % 4 == 1 ? "third" : ""
});

Where "third" is a CSS class like this:

<style>
    .third {
        background: orange;
        border-radius: 50%;
    }
</style>

Marked dates

Related sample:  Marked dates - DHTMLX Calendar

Displaying only current month

A default calendar shows both the days of the current month and several days of the previous and next months. You can choose the mode of displaying just the current month by setting the value of the thisMonthOnly configuration property to true:

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

This month only

Related sample:  The days of this month only - DHTMLX Calendar

Width of calendar

You can set the desired width of a calendar using the width configuration property. The default width of Calendar is 250px.

var calendar = new dhx.Calendar("calendar_container", {
    width:"300px"
});

Calendar width

Related sample:  Calendar width - DHTMLX Calendar

Back to top