Light-Weight JavaScript Event Calendar for

Efficient Time Management

DHTMLX helps you develop a Google-like JavaScript event calendar for efficiently organizing appointments. Users can manage events by drag-n-drop and display them in six different modes.

JavaScript Event Calendar Features

• Lightweight
• Simple JavaScript API
• Six default views: Day, Week, Month, Year, Agenda, Timeline
• Custom views
• Creating, resizing, and moving events by drag-n-drop
• Recurring events
• Attaching files to appointments
• Overlay events
• Multiday events
• Built-in datepicker in the sidebar
• Categorizing events by adding multiple calendars
• Autosaving of the appointment data
• Current time marker
• Auto-scrolling
• Adjustable view modes
• Configurable panel editor
• Stylization via CSS variables
• Dynamic loading
• Read-only mode
• Localization
• Easy Rest API integration
• TypeScript support
• Work in all modern web browsers
• Unassigned events
• Dimming past events

Construct Your JS Event Calendar With Ease

You can build a personalized JavaScript day planner right out of the box.

Modifying editor controls

Choose the fields to display for managing the events data. You may add a file uploader to attach files to the selected event or set a control to choose event color from the UI.

Configuring calendar behavior

Allow users to manage events via drag-n-drop or block all operations by setting a readonly mode. You can use readonly for the whole calendar or for specific events.

Using built-in themes

Select one of the embedded themes to change the overall Event Calendar appearance, e.g. Material, Willow, and Willow Dark. However, you’re free to apply custom styling using CSS variables.

Why Choose JavaScript Event Calendar Widget by DHTMLX?

For Developers

• Pure JS library with no dependencies
• Modern easy-to-use JavaScript API
• Smooth integration with DHTMLX Kanban and To Do List widgets
• Simplified customization via CSS variables
• Short learning curve equipped with well-structured documentation and detailed code samples

For Project Managers

• Maintaining strong data security level without having to transfer data to third-party tools
• Ability to easily combine the most-used Agile planning tools
• Relying on technical experts with over 10-years expertise in developing effective project management solutions
• Transparent licensing policy

Benefits of Opting for DHTMLX JS Event Calendar

Out-of-the-box js event calendar

DHTMLX Event Calendar is a lightweight version of a scheduling calendar with clean Material-based UI. It provides all the necessary functionality out of the box. Thus, you can easily build a Google-like event calendar with day, week, and month views, ability to create multiday and overlay events, and intuitive drag-n-drop behavior.

Modern JavaScript API

You’ll enjoy configuring an Event Calendar via its simple and modern 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, change the behavior of creating and rescheduling events, modify the editor appearance, and show or hide the sidebar.

Smooth integration with other DHTMLX widgets

You may create a complete time management web app by combining DHTMLX Event Calendar with 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.

Flexible UI customization

Our Event Calendar provides 3 built-in CSS themes: Material, Willow, and Dark. However, you can apply custom themes while also changing the calendar appearance via CSS variables. It's possible to modify the event shape, color, and content, set different colors to the sidebar calendars, as well as specify custom templates for the Calendar visual elements.