<

DHTMLX Calendar - Suite UI Library

Versatile JavaScript calendar from DHTMLX Suite UI library with three views for quickly navigating dates and selecting time and date ranges.

JavaScript Calendar Control Features

  • 3 views: calendar, month, year
  • Ability to select a range of dates
  • Ability to set inactive dates
  • Configurable first day of the week
  • Ability to highlight dates
  • Ability to add a time picker
  • 12-hour and 24-hour time format
  • Easy connection to any HTML object
  • Built-in multilingual support
  • Ability to add numbers of weeks
  • Full control with JavaScript API
  • Touch support
  • Simple configuration
  • Flexible customization
  • Cross-browser compatibility
  • TypeScript support
Looking for a Google-like calendar?
Try DHTMLX Event Calendar

DHTMLX Suite Demos with JavaScript/HTML Calendar

Try out our UI calendar functionality by downloading web app examples

Easily Adaptable JavaScript Calendar Component

Explore the examples of adjusting DHTMLX Calendar from the Suite UI library to meet your project requirements.

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.
Set initially selected date
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.
Apply custom styling
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.

JavaScript Calendar Picker with Date and Time Selectors

How to Build a Simple Calendar in JavaScript

5 Quick Steps to Start Working with
DHTMLX Suite UI Calendar:
1
Create an HTML file
2
Include the calendar js source files in the header
3
Add a container with an id - e.g. “calendar_container”
4
Initialize the widget with the dhx.Calendar object constructor
5
Specify a set of configuration properties if needed

Why Choose JavaScript Calendar from DHTMLX Suite?

User-friendly interface for date and time selection

The DHTMLX JavaScript calendar component from the Suite UI library serves as a date and 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.

Adjustable JavaScript calendar for time management

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 different countries.

Customizable UI

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

Our JavaScript calendar control is included in the Suite UI widget library together with 20+ other UI components. 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.

Other Suite Widgets

DHTMLX Calendar Licensing

Individual Commercial Enterprise Ultimate
License Terms
Individual
Commercial
Enterprise
Ultimate
Developers
Individual
1
Commercial
5
Enterprise
20
Ultimate
Projects
Individual
1
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Individual
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Individual
Commercial
Enterprise
Ultimate
Support Plan
Individual
Standard Support
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Individual
1 year
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Individual
Major, minor, and maintenance updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Individual
10
Commercial
30
Enterprise
50
Ultimate
Response Time
Individual
72h
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal Account Manager
Individual
Commercial
Enterprise
Ultimate
Up to 40% off
If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Individual - $799

Suite Commercial - $1699

Suite Enterprise - $3499

Suite Ultimate - $6999

demo-screenshot

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.

Need help with DHTMLX Calendar integration into your app? Contact us