DHTMLX React Scheduler - Valtio Demo

This project shows how to use DHTMLX React Scheduler in a React + Vite + TypeScript app while keeping Scheduler state in a Valtio store.

The Scheduler is used as a controlled component: Valtio drives events, date, and view via props, and user edits are mapped back to store actions through the data.save callback. The demo also includes snapshot-based undo/redo.

Features

• Day / Week / Month views controlled from a Material UI toolbar
• Date navigation (prev / today / next) stored in Valtio
• Event CRUD (create / update / delete) handled through data.save
• Snapshot-based undo/redo for events + view/date
• Seed dataset (src/seed/data.ts) for a known-good starting state

Requirements

• Node.js: 18+
• Package manager: npm

Quick start

1) Install

# clone
git clone <repo-url>
cd react-scheduler-valtio

# install
npm install

2) Run

npm run dev

Open: http://localhost:5173

Try it

• Switch between Day / Week / Month views in the toolbar.
• Use Prev / Today / Next to change the active date.
• Create or edit events using the Scheduler UI (default behavior is usually double-click to create and double-click to edit).
• Drag or resize an event and confirm the change is reflected in the Valtio store (it re-renders from updated props).
• Click Undo / Redo and confirm events, view, and date roll back / forward.

Project structure (high level)

• src/components/Scheduler.tsx – React Scheduler wrapper + data.save bridge to Valtio actions
• src/components/Toolbar.tsx – Material UI toolbar (view, navigation, undo/redo)
• src/store.ts – Valtio store with snapshot-based undo/redo
• src/seed/data.ts – initial events + initial date/view

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