Skip to main content


This page contains structured information that will help you to start working with DHTMLX Calendar and go into deep dive on its functionality.

How to start with DHTMLX Calendar

In this section you can find out the ways of Calendar initialization and localization, and learn how to integrate Calendar into your applications.

Initialization and localization

InitializationLearn how to initialize a Calendar (Example)
Date pickerLearn how to use a Calendar as a date picker (Example)
LocalizationLearn how to localize a Calendar (Example)


Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Calendar with React (Demo)
Angular integrationLearn how to use DHTMLX Calendar with Angular (Demo)
Vue integrationLearn how to use DHTMLX Calendar with Vue.js (Demo)

How to configure Calendar

In this section you can discover how to configure Calendar.

Calendar modesLearn how initialize Calendar in different modes (calendar, month, year) (Example)
Showing tooltipsLearn how to show tooltips in Calendar (Example 1, Example 2)
Start of the weekLearn how to change the starting day of the week (Example)
Timepicker in CalendarLearn how to add a timepicker into Calendar (Example)
Showing the week numbersLearn how to show the numbers of weeks (Example)
Displaying only current monthLearn how to display the current month only (Example)

How to work with dates

Initial calendar dateLearn how to specify the initial date of Calendar (Example)
Highlighted datesLearn how to highlight certain dates in Calendar (Example)
Disabled datesLearn how to disable certain dates (Example)
Date formatLearn how to specify the necessary format of dates (Example)

How to work with selected dates

Initially selected dateLearn how to create a calendar with an initially selected date (Example)
Selecting dateLearn how to select a date in Calendar (Example)
Getting selected dateLearn how to get the selected date (Example)

How to work with date ranges

Date ranges in one calendarLearn how to create a calendar in the range mode (Example)
Date ranges in two calendarsLearn how to link two calendars for selecting a date range (Example)

How to customize Calendar and change its size

In this section you can learn how to change the Calendar width and style.

Width of CalendarLearn how to set the necessary width of Calendar (Example)
Styling (custom CSS)Learn how to change the look and feel of Calendar (Example)
Styling selected datesLearn how to apply custom styling to selected dates (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Calendar events

This section explains how to work with Calendar events.

Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Calendar events (Example)

API reference

In this section you can find out corresponding references of Calendar API.

Calendar methodsLearn how to use Calendar methods
Calendar eventsLearn how to use Calendar events
Calendar propertiesLearn how to use Calendar properties

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Calendar.

Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


Do you need more functionality? Feel free to share your suggestions in the comments below!