< Suite 6.3 Rolls Out Grid Keyboard Navigation, Custom HTML Content, and Ajax Helper

React Calendar

An easy-to-customize React calendar widget available in cutting-edge Suite UI library.

How to Start with DHTMLX React Calendar

5 Quick Steps to Integrate Calendar with React
1
Create a Calendar.js file and import files and styles of Calendar
2
Create Calendar class, which extends the Component class
3
Add an empty container for Calendar with the reference to it in the el property using the ref property
4
When the component is initialized, initialize Calendar and attach the instance of Calendar to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed

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

Why choose React calendar widget?

Create a multi-featured calendar for React

Initialize dhtmlxCalendar in few steps. Set the languages you want this piece of software to support. The widget can be embedded in a pop-up and built to display the selected date in an input box. You can link two calendars together and thus enable end-users to choose the date range from one part to another.

Set up your React calendar component

You can choose from 3 modes for mapping dates: full-fledged one-month calendar, months of the year, and years only. Being configured using an API, the React JS calendar is a highly flexible UI library component. Add any HTML object to dhtmlxCalendar, attach a time picker (12h and 24h formats are available), show numbers of weeks or tooltips.

Enhance the material UI of your calendar in React

Modify each element with your custom styling via CSS. Pick the background color, change the fill of selected date period and week numbers. You can deactivate some dates and highlight the others with a special color. The calendar borders can be extended, shadowed and even hidden.

Use Angular and Vue.js wrappers

Along with React Calendar, our Suite UI library contains 20+ components that are also compatible with Angular and Vue.js. Download dhtmlxSuite trial version and feel its benefits for free within 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