DHTMLX React Scheduler Quick Start with Remix (React Router)

This project demonstrates how to integrate the DHTMLX React Scheduler component with Remix framework (React Router v7+). Built with React 19+ and React Router 7+, this demo provides a solid foundation for building powerful event scheduling and calendar applications with full TypeScript support for enhanced code quality and maintainability.

Features:

• Powerful Scheduler UI for event planning and calendar management.

• Remix (React Router v7+) integration with modern routing.

• React component driven approach with props controlling Scheduler configuration.

• Support for multiple view modes (day, week, month) for flexible event visualization.

• Interactive drag-and-drop functionality for event management.

• Strong TypeScript support for type-safe usage.

Project Structure:

dhx-react-scheduler-remix-demo/
├── app/
│   ├── routes/
│   │   └── home.tsx         # Main route with Scheduler integration
│   ├── root.tsx             # Root layout
│   ├── routes.ts            # Routes configuration
│   └── app.css              # Global styles and Tailwind configuration
├── components/
|   └── Scheduler/
│       └── Scheduler.tsx    # Scheduler component
├── data/
│   └── demoData.ts          # Sample events data
├── react-router.config.ts   # React Router configuration
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project dependencies

How to install using npm/yarn

Install dependencies:

npm install

or

yarn

Run the demo on the local server and explore it

Start the development server:

npm run dev

or

yarn dev

Build for production

npm run build

or

yarn build

Start production server

npm start

or

yarn start

License

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

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

Useful links

DHTMLX React Scheduler product page

DHTMLX Scheduler product page

Scheduler Documentation

React Scheduler Documentation

Remix Documentation

React Router Documentation

Blog

Forum