DHTMLX Scheduler overview

DHTMLX Scheduler is a JavaScript event calendar component for displaying and editing schedules in the browser. It supports classic calendar views (Day/Week/Month/Year), rich event editing (drag-create/resize/move + lightbox), Recurring series, and advanced resource planning views (Timeline/Units in PRO).

DHTMLX Scheduler is available in Standard and PRO editions. The Standard edition is distributed via public package sources, while PRO/Evaluation can be installed from a private npm registry (or added manually).

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 "How to start" guide suitable for your stack:

JavaScript

Minimal setup with script tags or bundlers.

React

Use the ready-made ReactScheduler component with props and events.

Angular

Integrate Scheduler into Angular projects using a thin wrapper.

Vue

Use Scheduler inside Vue apps with a small wrapper and reactive configuration.

Svelte

Embed Scheduler in Svelte with a simple component that binds config and events.

React

Embed the core Scheduler widget into your own components for full control over life cycle and data flow.

Salesforce

Use Scheduler in Salesforce Lightning Web Components and connect it to org data.

Live demos

To see DHTMLX Scheduler in action, explore the online demos:

• Basic initialization (week view).
• Recurring events.
• Timeline view performance (horizontal scroll).
• Templates example.
• Browse all samples.

Key capabilities

DHTMLX Scheduler focuses on interactive calendar UX and extensibility. The sections below highlight core areas and point to deeper chapters.

Calendar views & navigation

Scheduler provides multiple ways to visualize time and events:

• Built-in calendar views (Day/Week/Month/Year/Agenda-style variations). See the general overview in Views.
• Configurable navigation/header and responsive initialization via scheduler.config.header.

Event creation & editing

Scheduler is designed for "calendar-first" editing:

• Drag-create, drag-resize, and drag-move interactions (configurable).
• Built-in editor (Lightbox) and optional Quick Info popups via extensions.
• Templates for event text, Tooltips, headers, and UI fragments (for full control over rendering).

Recurring series & exceptions

Recurring events are supported via a dedicated extension and modern recurrence format. See Recurring Events.

Resource planning views (PRO)

PRO adds advanced planning modes commonly used for resource scheduling:

• Timeline view, Units view, Week Agenda, Grid view and other PRO-only extensions.
• Multi-section events (assigning one event to multiple resources/sections) via the Multisection extension.

Data loading, formats, and syncing

Scheduler can be connected to your data layer in several ways:

• Load data from your backend and keep it in sync (common patterns use a REST-like API + DataProcessor).
• Server-side How to start guides exist for multiple stacks (Node, ASP.NET Core, PHP/Laravel, Ruby, etc.).

Frameworks and backend integration

Frontend integration

Scheduler can be used:

• As a standalone JS widget on any page - plain HTML/JS initialization.
• Wrapped into framework components via the How to start guides for React/Angular/Vue/Svelte.

Installation notes

• Standard edition:
  • npm install dhtmlx-scheduler
  • or include from CDN.
• PRO/Evaluation:
  • install from a private npm registry or add the package manually/from a local folder, see the Installation guide.

What's next

If you are just getting started:

1. Pick a Quick start by framework guide or start from plain HTML/JS initialization.
2. Configure your UI: header, views, templates, and editing rules.
3. Enable the needed extensions - Recurring, Timeline/Units in PRO, Quick Info, Tooltip, etc..
4. Connect to your backend using the Server-Side Integration guides.
5. Explore Guides and API reference for deeper customization.

If you're upgrading, check the What's new and migration guides in the docs.