DHTMLX Scheduler overview

DHTMLX Scheduler is a highly configurable JavaScript event calendar component, complete with TypeScript definitions. It is designed for displaying, editing and managing schedules directly in the browser. The component integrates with React, Angular, Vue and other frontend frameworks. DHTMLX Scheduler also supports AI-assisted development through the DHTMLX MCP Server, Agent Skills, and a structured API.

You can use it in project management, CRM, booking systems, healthcare, education, field service, SaaS and other business applications that require an interactive calendar, event planner or resource scheduling timeline.

Quick start by framework

You can use DHTMLX Scheduler as a vanilla JavaScript widget or integrate it into a modern framework. Start with a step-by-step guide suitable for your stack:

JavaScript

React

Angular

Vue

Svelte

Salesforce

React, Angular and Vue support two integration approaches:

• Ready-made React Scheduler, Angular Scheduler, and Vue Scheduler wrappers (recommended for PRO and evaluation projects)
• Direct integration of the core JavaScript Scheduler component with React, Angular, Vue (Standard edition)

Live demos

To see DHTMLX Scheduler in action, explore some of the most popular demos:

• Basic initialization (week view)
• Recurring events and Timeline view performance examples
• Templates example

View All Samples to check the full range of Scheduler features.

For framework-oriented starting points, see the example repositories for React, Angular, and Vue.

note

Some samples demonstrate PRO functionality, so check the Standard vs PRO comparison before reusing them in a Standard edition project.

Developer resources

• Installation guide for Standard, trial and PRO setup flows
• Standard vs PRO comparison for feature differences between editions
• Public npm package of the JavaScript Scheduler under the Standard edition
• GitHub repository for the source code of the Standard edition and issue tracking
• API reference and samples for implementation details
• What's New for releases and migration notes

Scheduler feature highlights

DHTMLX Scheduler includes multiple calendar views, rich event editing and resource planning tools.

Calendar views and navigation

At its core, Scheduler renders classic calendar views and lets users move through time. It includes:

• Day, Week, Month, Year and Agenda views for visualizing schedules at any scale.
• Configurable header with navigation options and view tabs.

Event creation and editing

The component provides "calendar-first" editing, i.e. users can create or update events quickly right on the calendar:

• Drag-create, drag-resize and drag-move interactions for events within the scheduler.
• Flexible lightbox editor for full event details, plus optional Quick Info popups for quick edits.
• Cross-scheduler drag-and-drop for moving events between different schedulers
• Drag-and-drop integration with external sources for dragging records from separate components into the scheduler as new events.
• Multi-user live updates for collaborative scheduling scenarios.

Recurring series and exceptions

Recurring events are supported via a dedicated extension and iCalendar compatible RFC 5545 recurrence format:

• Recurring events with per-occurrence exceptions.
• Validation and collision prevention to keep schedules consistent.

Resource planning views (PRO)

For teams that need more than a simple calendar, the PRO edition of DHTMLX Scheduler provides advanced planning modes:

• Timeline and Units views for resource scheduling.
• Week Agenda and Grid views for compact, list-style planning.
• Multi-section events that assign one event to several resources.

Export and ecosystem

Teams often need to share schedules, keep local backups, or sync with external calendars. DHTMLX Scheduler integrates with external tools and output formats by supporting:

• Export to PDF, PNG, Excel and iCal.
• Two-way sync with Google Calendar.

Customization and styling

The calendar's appearance can be adjusted at every level from a full theme to a single event box through:

• A set of built-in skins, with support for deep customization and creating new themes.
• Templates for event content, headers, tooltips and other UI fragments.
• Localization support for interface language and date/time formats, plus RTL mode.

Editions and licensing

DHTMLX Scheduler is available in two editions: Standard and PRO. You can start with the free Standard edition and upgrade to the PRO edition later if you need more features, official support, and a fully maintained Scheduler foundation. You may also start directly with the PRO edition either through an official trial or with a paid license. Choose one of the following options to get started with DHTMLX Scheduler:

• Standard edition. Distributed via public package sources (npm, CDN), it covers the core interactive calendar features.
• Official trial. It lets you evaluate the full PRO feature set and receive technical support during the trial period.
• PRO edition. Built for production environments, it includes advanced scheduling features, official support and commercial licensing. It is installed from a private npm registry or added manually.

To see the exact feature differences between editions, check the Standard vs PRO comparison. For the setup flow of each option, see the installation guide.

note

Standard edition is available under the GNU GPL v2 license only. To use DHTMLX Scheduler in non-GPL projects (and get PRO version of the product), please purchase Individual, Commercial, Enterprise, Ultimate, or Startup license on our site or contact us at sales@dhtmlx.com.

AI coding tools

For AI-assisted development, start with the DHTMLX Scheduler guides created specifically for coding assistants:

• AI Tools guide
• DHTMLX MCP Server guide
• Agent Skills guide
• Lovable Starter Walkthrough

Backend integration

DHTMLX Scheduler lets you connect to any backend by implementing a RESTful API on the server:

• Data is typically loaded and saved as JSON for events and their recurrence rules.
• The built-in DataProcessor helps route create, update and delete operations to your server.
• There are tutorials for popular backend platforms and frameworks (Node.js, ASP.NET Core, Laravel, Ruby on Rails, etc.) that cover CRUD operations and best practices for syncing Scheduler with your database.

What's next

If you are just getting started, proceed as follows:

1. Refer to the How to start guide for your preferred front-end framework or plain JavaScript.
2. Configure the header, views, templates and editing behavior via the Lightbox.
3. Enable the extensions you need, such as Recurring events, Timeline/Units in PRO, Quick Info, Tooltips.
4. Connect to your backend, set up the Server-Side Integration and application endpoints for events.
5. Explore Guides and API reference for deeper customization such as templates, events, and extensions.

If you are already using DHTMLX Scheduler and upgrading from an earlier version, check What's New for the release notes and a summary of the latest features and migration guides.