<
DHTMLX Event Calendar 2.3 with Custom Views, Improved Overnight Events Display, and Enhanced Calendar Editor
Download

Lightweight JavaScript Event Calendar
for Efficient Time Management

DHTMLX helps you build a Google-like event calendar for JavaScript apps. Empower your users to organize appointments efficiently with drag-n-drop and display them in six different modes.

Get free trial
View docs
View demo on desktop
NCI
Deutsche Bank
Siemens
Apple
Airbus
Embraer
Hilton
Tele2
Aprika
FedEx
GanttPro
Oracle
Amazon
Accenture
IBM
Cisco
Intel
Nasa
ABB
Capgemini
BBC News
NCI
Deutsche Bank
Siemens
Apple
Airbus
Embraer
Hilton
Tele2
Aprika
FedEx
GanttPro
Oracle
Amazon
Accenture
IBM
Cisco
Intel
Nasa
ABB
Capgemini
BBC News
Our JavaScript calendar component is a handy solution for displaying upcoming events in a clean, calendar-based interface.
Capterra Shortlist 2024
GetApp Category Leaders 2024
Software Advice Front Runners 2024
Best Meets Requirements
High Performer EMEA
Users Most Likely To Recommend
Easiest to Use

JS Event Calendar Key Features

Multiple built-in view modes

DHTMLX Event Calendar includes 6 predefined views and allows adding custom view modes to visualize and manage events based on different needs:

Recurring and multiday events

You can build an interactive event calendar with an option to create, resize, and move events by drag-and-drop. The component allows you to define the recurrence of appointments for all view modes using predefined or custom patterns and creating events spanning multiple days, making it easy to manage long-term and recurring activities.

Multiple calendars on the sidebar and event categorization

Our JavaScript Event Calendar supports event categorization by adding multiple calendar instances to the sidebar, making it easy to organize and filter events by type, project, user, or any other parameters. Events can be visually distinguished using color-coded backgrounds.

Multiuser backend support

DHTMLX Event Calendar supports a multi-user backend that enables real-time collaboration across multiple users without the need for page reloads. This feature allows end-users to interact with the same set of events simultaneously, with all updates instantly reflected in the UI.

Check the documentation
Get free trial

JavaScript Calendar Library Integrations

Angular
Vue.js
React
Svelte
TypeScript
Check out all the DHTMLX integrations

Demo Examples of JavaScript Web Calendar

Project Management App: Event Calendar
Project Management App: Event Calendar
Manage events via a calendar view
View
Doctor Appointment Management
Doctor Appointment Management
Visualize patient reservations
View
JS Calendar with Heatmap Chart
JS Calendar with Heatmap Chart
Show a total of orders completed per day
View
Start with Event Calendar
Light-weight JavaScript Event Calendar for efficiently organizing appointments and display them in six different modes
Download now

Comparing DHTMLX Event Calendar and Scheduler

DHTMLX Event Calendar and Scheduler are two separate JavaScript libraries with different capabilities. They provide
unique feature sets and can be suited for different-purpose projects.
Learn more about DHTMLX Scheduler
Event Calendar
Small and lightweight
Simple and modern API
Perfect component for creating Google-like calendars with settings working out-of-the-box
6 default views and the ability to create custom ones
3 CSS themes (Material, Willow, Dark)
Similar architecture and design approach to Kanban and To Do List
Scheduler
Big and complex
Extensive API
Adaptable solution with numerous configurations for developing any scheduling apps
10 views and the ability to add custom ones
5 skins (Terrace, Material, Flat, Contrast Black and White)
Similar architecture and design approach to Gantt

Benefits of Opting for DHTMLX JS Event Calendar

Out-of-the-box js event calendar
DHTMLX Event Calendar is a lightweight version of a calendar component with a clean Material-based UI. It provides rich built-in functionality to create a JavaScript calendar with recurring events, intuitive drag-n-drop behavior, and different views.
Modern JavaScript API
You’ll enjoy configuring an Event Calendar via its simple API. It includes a broad range of methods, events, and properties, ensuring full control over the widget's look and feel. You can configure view modes and editor appearance, or change the behavior of creating and rescheduling events.
Smooth synchronization
You may create a complete time management web app by combining DHTMLX Event Calendar with a Kanban board and To Do List. Having equally simple APIs and clean UIs, these widgets can be easily used and configured within a single app as well as styled using the same CSS variables.
Customizable JavaScript calendar interface
You can use built-in themes or apply custom ones and change the calendar appearance via CSS variables. It's possible to modify the event shape, set different colors to the sidebar calendars, as well as specify custom templates for the Calendar visual elements.
Touch and cross-browser support
You can build a mobile-friendly JavaScript calendar for websites with full touch support for mobile and tablet devices. DHTMLX Event Calendar also offers robust cross-browser compatibility, working flawlessly across all modern web browsers.
Get started for free
Download a free 30-day trial version of DHTMLX Event Calendar and evaluate it, taking advantage of our technical support and how-to guides.
Try for free

DHTMLX Event Calendar Pricing

Individual
Total: $419
Buy now
Commercial
Total: $909
Buy now
Enterprise
Total: $2029
Buy now
Ultimate
Total: $4059
Buy now
License Terms Read License Agreement Read License Agreement Read License Agreement Read License Agreement
Developers 1 5 20
Projects 1 1 5
Use in SaaS (unlimited end-users)
Perpetual distribution rights
Support Plan
 Standard Premium Premium Ultimate
Time Period 1 year 1 year 1 year 1 year
Updates Major, minor, and maintenance updates Major, minor, and maintenance updates Major, minor, and maintenance updates
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests 10 30 50
Response time 72h 48h 48h 24h
Personal Account Manager
Individual
$419
License Terms Read License Agreement
Developers 1
Projects 1
Use in SaaS (unlimited end-users)
Perpetual distribution rights
Support Plan
 Standard
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 10
Response time 72h
Personal Account Manager
Commercial
$909
License Terms Read License Agreement
Developers 5
Projects 1
Use in SaaS (unlimited end-users)
Perpetual distribution rights
Support Plan
 Premium
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 30
Response time 48h
Personal Account Manager
Enterprise
$2029
License Terms Read License Agreement
Developers 20
Projects 5
Use in SaaS (unlimited end-users)
Perpetual distribution rights
Support Plan
 Premium
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 50
Response time 48h
Personal Account Manager
Ultimate
$4059
License Terms Read License Agreement
Developers
Projects
Use in SaaS (unlimited end-users)
Perpetual distribution rights
Support Plan
 Ultimate
Time Period 1 year
Updates
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Response time 24h
Personal Account Manager

Unlock up to 65% Savings with DHTMLX Bundles

Complete pack
Gantt
Scheduler
Suite with Grid
Spreadsheet
Diagram
Pivot
Kanban
Event Calendar
To Do List
Rich Text Editor
Vault
ChatBot
Booking widget
What's in it for you:
  • The full power of all complex widgets combined with prime Suite UI controls
  • From $380 per developer (even less for big teams)
  • Save up to 65% compared to purchasing all components individually
Check Complete pack offer
Planning pack
To Do List
Event Calendar
Scheduler
Kanban
Gantt
Booking widget
What's in it for you:
  • From $286 per developer
  • Get Gantt and Scheduler - three other widgets come for free in this bundle
  • The most comprehensive set of project management tools
Check bundle offers
Scheduling pack
Event Calendar
Scheduler
Gantt
Booking widget
What's in it for you:
  • From $206 per developer
  • Save up to 60% on Gantt and Scheduler and get Event Calendar as a bonus
  • All you need for building outstanding booking and scheduling apps
Check bundle offers
Documentation
Explore the documentation
Speed up your development with detailed guides and comprehensive API references covering every aspect of working with DHTMLX Event Calendar.
Visit documentation
Samples
Experiment with code snippets
Use our code snippet tool to explore Event Calendar features. Create and configure your JS calendar and share customized examples with your team or DHTMLX support.
Visit samples
Free trial
Get free 30-day trial
Download the Event Calendar for JavaScript and integrate it into your project. Our support team is here to help you throughout the evaluation period.
Download free trial
Demos
View demo examples
See how the JS Event Calendar and other DHTMLX components can be configured and implemented in real-world solutions.
Visit demos
Forum
Join the developer community
Browse our moderated forum - a space where developers share insights and discuss various topics related to DHTMLX Event Calendar.
Visit forum
Official tech support
Get help from the team
Learn more about our support options. Whether you're a licensed user or evaluating the component, our support team is ready to assist.
Visit official tech support

DHTMLX Event Calendar for JavaScript:
Frequently Asked Questions

What is the best JavaScript event calendar for web apps?

Obviously, the best JavaScript calendar depends on your project's needs, but DHTMLX Event Calendar stands out as a robust solution for modern web applications. It offers multiple built-in view modes (Day, Week, Month, Year, Agenda, Timeline), supports recurring and multi-day events, and real-time multi-user collaboration. The component has a configurable structure and customizable UI with built-in themes and templates. You can also integrate it with popular frameworks and use detailed documentation and multiple online samples to simplify project development.

How to add an event calendar in JavaScript to my website?

Integrating DHTMLX Event Calendar into your website is straightforward. First, you should download the package and include the necessary files in your project. Then, create an HTML container element for the calendar and initialize it using a few lines of JavaScript. You can configure views, load events from a data source, and customize behavior with the provided API. The initialization process is described in the documentation.

Is DHTMLX Event Calendar mobile-friendly and responsive?

DHTMLX Event Calendar is a fully mobile-friendly and responsive JavaScript calendar. It automatically adapts to different screen sizes, providing a smooth user experience on desktops and smartphones. Touch support is built in, allowing end-users to easily navigate views, select dates, and interact with events using gestures.

Can I integrate DHTMLX JavaScript calendar with drag-and-drop functionality with React, Angular, or Vue?

Yes, you can integrate DHTMLX Event Calendar into frameworks like React, Angular, and Vue. We provide official guides and code examples to help with integration into each of these frameworks. The drag-and-drop feature works out of the box and allows end-users to create, move, or resize events directly within the calendar UI.

How long does the free trial last, and what features are included?

The DHTMLX Event Calendar offers a 30-day free trial. During the evaluation period, you can explore the full capabilities of the calendar, including:

  • Multiple built-in view modes
  • Support for recurring, multi-day, and overlay events
  • Drag-and-drop functionality for event management
  • Dynamic loading
  • Rich customization options via CSS variables and templates

Additionally, during the trial, you receive official technical support from the DHTMLX team to assist with any questions or integration challenges you may encounter.

Latest Blog Posts

Announcing New JavaScript Project Management Demo App with Backend
November 20, 2024
3 min read
Master Time Management with DHTMLX JavaScript Calendar Widgets
August 29, 2024
7 min read
Points to Consider When Choosing Between DHTMLX Scheduler and Event Calendar
September 30, 2022
7 min read
What's new
Discover the recently launched DHTMLX Event Calendar versions, fresh developer guides, and tutorials with code snippets and practical tips from our tech team.
Dive deeper