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
|Initialization||Learn how to initialize a Calendar (Example)|
|Date picker||Learn how to use a Calendar as a date picker (Example)|
|Localization||Learn how to localize a Calendar (Example)|
|Backend integration||Learn how to connect DHTMLX Suite to a backend (Demo)|
|Optimus||Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app |
(recommended framework for creating apps with Suite components)
|React integration||Learn how to use DHTMLX Calendar with React (Demo)|
|Angular integration||Learn how to use DHTMLX Calendar with Angular (Demo)|
|Vue integration||Learn how to use DHTMLX Calendar with Vue.js (Demo)|
How to configure Calendar
In this section you can discover how to configure Calendar.
|Calendar modes||Learn how initialize Calendar in different modes (calendar, month, year) (Example)|
|Showing tooltips||Learn how to show tooltips in Calendar (Example 1, Example 2)|
|Start of the week||Learn how to change the starting day of the week (Example)|
|Timepicker in Calendar||Learn how to add a timepicker into Calendar (Example)|
|Showing the week numbers||Learn how to show the numbers of weeks (Example)|
|Displaying only current month||Learn how to display the current month only (Example)|
How to work with dates
|Initial calendar date||Learn how to specify the initial date of Calendar (Example)|
|Highlighted dates||Learn how to highlight certain dates in Calendar (Example)|
|Disabled dates||Learn how to disable certain dates (Example)|
|Date format||Learn how to specify the necessary format of dates (Example)|
How to work with selected dates
|Initially selected date||Learn how to create a calendar with an initially selected date (Example)|
|Selecting date||Learn how to select a date in Calendar (Example)|
|Getting selected date||Learn how to get the selected date (Example)|
How to work with date ranges
|Date ranges in one calendar||Learn how to create a calendar in the range mode (Example)|
|Date ranges in two calendars||Learn 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 Calendar||Learn 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 dates||Learn how to apply custom styling to selected dates (Example)|
|List of CSS classes||A 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 rules||Learn basic rules on how to work with events|
|Event handling||Learn how to attach, detach, or call the Calendar events (Example)|
In this section you can find out corresponding references of Calendar API.
|Calendar methods||Learn how to use Calendar methods|
|Calendar events||Learn how to use Calendar events|
|Calendar properties||Learn how to use Calendar properties|
In this section you will learn about common functionality of the library which can be useful while working with Calendar.
|Touch support||Learn how to work with touch support|
|TypeScript support||Learn how to work with TypeScript|
|AwaitRedraw||Learn 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!