Explore the examples of adjusting DHTMLX Calendar from the Suite UI library to meet your project
Specify date format
The Calendar widget allows you to define the format of dates. By default, the format is
DD-MM-YYYY, but you can set desirable characters with the help of our API. For example,
the widget may display days or months as a number, a short or full name of the month,
and a two- or four-digit year.
DHTMLX Calendar makes it possible to specify an initially selected date. By default,
the specified date is highlighted with a round blue marker. You can easily apply custom
design by changing system styles.
You’re free to modify the Calendar look and feel via API or by adding new CSS classes
with preferable settings. For instance, you may change the background color and set
non-standard colors to selected and highlighted dates as well as to date ranges in a calendar.
User-friendly interface for date and time selection
time selector. If needed, you can put the calendar in a popup and display the selected
date in an input field. Placing two calendars together allows you to select a range of
dates with the start date on the first calendar and the end date on the second one. You
can also add a time picker in the 12- or 24-hour format.
DHTMLX Suite Calendar works as a month calendar but can also display all months of the
year and years. Due to a rich API, you can configure the widget exactly the way you need.
For instance, you can block or highlight dates, show numbers of weeks, and define the
first day of the week. You can also apply any locale you need to support users from
Broad customization options allow you to change every aspect of the DHTMLX Calendar
via CSS. You can color the background, highlighted dates, selected date ranges, and
numbers of weeks to match your web app. Additionally, you can apply different styles
to the calendar borders, for example, by adding a shadow or hiding borders at all.
Support for Angular, React, and Vue.js
DHTMLX Calendar, as well as the whole Suite, can be used in any projects based on such widespread frameworks as Angular, React, or Vue.js.
You can try it out in your web app downloading a 30-day free evaluation version.
Support and Learning Resources for DHTMLX Calendar
File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.
If you have an open-source (GNU GPL v2) project and you are not interested in PRO features, you may
use DHTMLX Calendar Standard Edition for free.
It comes without official technical support, but you can use the community forum instead.