< Enjoy number formatting, multiline content in cells, and new tooltip templates in Grid and TreeGrid in DHTMLX Suite 7.1

JavaScript Calendar for Date & Time Selection

Versatile HTML calendar in pure JavaScript with three calendar views for quickly navigating dates and selecting time and date ranges.

JavaScript Calendar Widget 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
  • Support for IE11+
  • TypeScript support
dhtmlxScheduler
Looking for a full-featured event calendar?
Try dhtmlxScheduler

JavaScript Calendar Demo - Date & Time Selector

How to Build a Simple JavaScript Calendar Widget

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 JavaScript Calendar Widget by DHTMLX?

User-friendly interface for date and time selection

DHTMLX Calendar serves as a JavaScript 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 Calendar works as a JavaScript 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 JavaScript calendar UI 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.

DHTMLX Calendar 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 DHTMLX Calendar integration into your app? Contact us