Skip to main content

Features

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​

TopicDescription
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)

Integration​

TopicDescription
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.

TopicDescription
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​

TopicDescription
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​

TopicDescription
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​

TopicDescription
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.

TopicDescription
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.

TopicDescription
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.

TopicDescription
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.

TopicDescription
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?​


info

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