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.
Live Demo
Integration examples:
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
Support and Learning Resources for JS Calendar
vs
DHTMLX 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 (Day, Week, Month, Year, Agenda, and Timeline) and the ability to create custom ones
- 3 CSS themes (Material, Willow, Dark)
- Read-only mode for specific events or the whole calendar
- The same architecture and design approach as in Kanban and To Do List
DHTMLX 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)
- Read-only mode for specific events, the whole calendar, lightbox, or specific lightbox fields
- The same architecture and design approach as in Gantt
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
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.
DHTMLX Event Calendar Pricing
| 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 (unlimited end-users) |
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
Major, minor, and maintenance updates
|
Commercial
Major, minor, and maintenance updates
|
Enterprise
Major, minor, and maintenance updates
|
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
|
| 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
|
|
Individual
Total:
$599
$419
|
Commercial
Total:
$1299
$909
|
Enterprise
Total:
$2899
$2029
|
Ultimate
Total:
$5799
$4059
|
Unlock up to 65% Savings with DHTMLX Bundles
Try JavaScript Event Calendar for Free
Download a free trial to estimate Event Calendar features and benefit from:
30 days of use without charge
Official technical support
Well-documented guides and code samples
Need help with DHTMLX Event Calendar integration into your app? Contact us