This demo shows how to use DHTMLX React Scheduler with Redux Toolkit. It focuses on wiring the Scheduler to a single Redux store: the Scheduler UI edits events, Redux stores them, and a small toolbar (Material UI) controls navigation, view switching, and undo/redo.

• Day/week/month views
• Custom toolbar (Material UI) for navigation and view switching
• Create/update/delete events via the Scheduler UI, stored in Redux Toolkit
• Toggle Scheduler read-only mode via Redux-managed config
• Snapshot-based undo/redo for event and config changes

• Node.js: 20.19+ (required by Vite 7)
• Package manager: npm

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

# install
npm install

npm run dev

Open: http://localhost:5173

• src/components/Scheduler.tsx – Scheduler initialization + Scheduler↔Redux data bridge
• src/components/Toolbar.tsx – toolbar UI (view buttons, navigation, undo/redo)
• src/redux/schedulerSlice.ts – Scheduler state + snapshot-based undo/redo
• src/redux/actions.ts – event create/update/delete action creators
• src/seed/data.ts – initial seed events/date/view

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

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.

DHTMLX React Scheduler product page

DHTMLX Scheduler product page

Documentation

React Scheduler Documentation

Blog

Forum