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");
  • "month" - only months of the current year are shown in the calendar
var calendar = new dhx.Calendar("calendar", {
    view: "month"
});
  • "year" - only years are shown, including the current one
var calendar = new dhx.Calendar("calendar", {
    view: "year"
});
  • "timepicker" - the calendar is shown in the timepicker mode
var calendar = new dhx.Calendar("calendar", {
    view: "timepicker"
});

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". There is the full list of avalaible characters used to make formats in the API reference.

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

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. By default, it is either the same as value, 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 Monday, as the weekStart:"monday" configuration option is used. It is also possible to set Sunday as start of the week, by applying "sunday" as a value of the mentioned setting:

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

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

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

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 on the calendar.

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

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>

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 hideOtherMonth configuration property to false:

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

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"
});
Back to top