Features
This page describes how to start with DHTMLX Calendar and explore its functionality in depth.
How to start with DHTMLX Calendar
Learn how to initialize and localize Calendar, and how to integrate it into your applications.
Initialization and localization
| Topic | Description |
|---|---|
| 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) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use the DHTMLX Optimus framework to build a DHTMLX-based app (the recommended framework for 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
| Topic | Description |
|---|---|
| Calendar modes | Learn how to 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 to Calendar (Example) |
| Showing the week numbers | Learn how to show week numbers (Example) |
| Displaying only current month | Learn how to display the current month only (Example) |
How to work with dates
| Topic | Description |
|---|---|
| Initial calendar date | Learn how to specify the initial date of Calendar (Example) |
| Highlighted dates | Learn how to highlight specific dates in Calendar (Example) |
| Disabled dates | Learn how to disable specific dates (Example) |
| Date format | Learn how to specify the date format (Example) |
How to work with selected dates
| Topic | Description |
|---|---|
| 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
| Topic | Description |
|---|---|
| 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 to select a date range (Example) |
How to customize Calendar and change its size
| Topic | Description |
|---|---|
| Width of Calendar | Learn how to set the Calendar width (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
| Topic | Description |
|---|---|
| Event basic rules | Learn the basic rules for working with events |
| Event handling | Learn how to attach, detach, or call Calendar events (Example) |
API reference
| Topic | Description |
|---|---|
| Calendar methods | Learn how to use Calendar methods |
| Calendar events | Learn how to use Calendar events |
| Calendar properties | Learn how to use Calendar properties |
Common functionality
These common features are useful when you work with Calendar.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to run code after the component renders |
Any questions left?
info
Do you need more functionality? Feel free to share your suggestions in the comments below!