JavaScript Calendar for Date & Time Selection

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.