DHTMLX React Scheduler - MobX Demo

This demo shows how to use DHTMLX React Scheduler with MobX in a Vite + React app.

The Scheduler UI is fully driven by observable MobX state (events, current view/date, config). Any user action inside Scheduler (create/update/delete) is routed through data.save into MobX store methods, keeping all mutation logic in one place.

Features

• Day / week / month views with date navigation
• Create, edit, drag-and-drop, and delete events
• MobX store actions as the single source of truth for Scheduler data
• Read-only toggle via config.readonly
• Snapshot-based undo/redo for event changes

Requirements

• Node.js: ^20.19.0 || >=22.12.0 (required by Vite 7)
• Package manager: npm (repo includes package-lock.json)

Quick start

1) Install

# clone
git clone <repo-url>
cd <repo-folder>

# install
npm install

2) Run

npm run dev

Open: http://localhost:5173

Try it

• Create an event (double-click in the calendar or use the built-in UI)
• Edit the event (open the editor and change text/time)
• Drag an event to a new time slot
• Click Undo / Redo in the toolbar to revert/apply recent event changes
• Switch between Day / Week / Month and navigate dates using < / Today / >

Project structure

• src/components/Scheduler.tsx – Scheduler initialization + data.save bridge to the MobX store
• src/components/Toolbar.tsx – simple toolbar (views, navigation, undo/redo)
• src/store.ts – MobX store (events + snapshot-based history)
• src/seed/data.ts – deterministic seed events and initial view/date

Notes

• createEvent() returns the created event with a final id (simulating a backend-generated id). This keeps subsequent updates working after an item is created.
• Undo/redo in this demo tracks event mutations only (view/date navigation is not part of history).

Scripts

• dev – run the app locally
• build – build for production
• preview – preview the production build locally
• lint - run ESLint

License

Source code in this repo is released under the MIT License.

DHTMLX React Scheduler is a commercial library - use it under a valid DHTMLX license or evaluation agreement.

Useful links

DHTMLX React Scheduler product page

DHTMLX Scheduler product page

Documentation

React Scheduler Documentation

Blog

Forum