< Suite 6.2 with New Grid & TreeGrid Editors, Row Drag-n-Drop, Flexible Columns, and Much More

JavaScript Calendar

A highly customizable HTML calendar in pure JavaScript from the leading-edge Suite UI library.

Product Features

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

Live Demo

How to Build a Simple JavaScript Calendar

5 Quick Steps to Start Working with Your HTML 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 dhtmlxCalendar?

Build your JavaScript calendar easily

A simple initialization enables you to get down to work at a moment’s notice. You can provide your JavaScript calendar with multilingual support. If needed, you can put the calendar in a popup and display the selected date in an input field. Besides, 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.

Configure your JavaScript calendar to the utmost

dhtmlxCalendar is a lightweight cross-browser JavaScript calendar widget with 3 modes for showing dates of one month, months of the year, and years. Due to the rich JavaScript API, you can configure the calendar exactly the way you need. For instance, attach any HTML object to the calendar like a time picker in the 12- or 24-hour format, block or highlight dates or show numbers of weeks.

Fine-tune the UI of your calendar

Broad customization options allow you to change every aspect of your UI 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 the borders at all.

Angular, React, and Vue.js wrappers

Our calendar control is included in the Suite UI library together with 20+ other UI components. Due to special wrappers, dhtmlxCalendar, 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 our evaluation version, which is free for 30 days.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

dhtmlxCalendar Licensing

Free GNU GPL v2 Commercial Enterprise Ultimate
License Terms
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Developers
Free GNU GPL v2
Commercial
5
Enterprise
20
Ultimate
Projects
Free GNU GPL v2
(open source only)
Commercial
1
Enterprise
5
Ultimate
SaaS
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Free GNU GPL v2
Commercial
Enterprise
Ultimate
Support Plan
Free GNU GPL v2
No Official Support
Commercial
Standard Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
GNU GPL
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
GNU GPL
Commercial
Minor & major updates
Bug fixes
Enterprise
Minor & major updates
Bug fixes
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
Tickets
Free GNU GPL v2
Only Community Forum
Commercial
10
Enterprise
30
Ultimate
Response Time
GNU GPL
Commercial
72h
Enterprise
48h
Ultimate
24h
Personal Acccount Manager
GNU GPL
Commercial
Enterprise
Ultimate
demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Up to 40% off

If you choose the whole Suite library instead
of buying DHTMLX UI components separately:

Suite Commercial - $799

Suite Enterprise - $1699

Suite Ultimate - $3499

Need help with dhtmlxCalendar integration into your app? Contact us