< DHTMLX Suite 7.2 with a New Form Control, Multiselect Editor for Grid, Custom Scrollbar, and Much More

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

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
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
Minor & major updates
Bug fixes
Commercial
Minor & major updates
Bug fixes
Enterprise
Minor & major updates
Bug fixes
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
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
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 Individual - $799

Suite Commercial - $1699

Suite Enterprise - $3499

Suite Ultimate - $6999

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