Starter project showing how to use DHTMLX React Scheduler in a React App.
Note, @dhx/react-scheduler and @dhx/trial-react-scheduler are hosted on a private Npm registry. You need to configure your npm client and request access to them.
-
Start a trial to gain access to @dhx npm registry and follow the provided instructions for npm configuration.
-
Clone the repo and run
git clone https://github.com/dhtmlx/react-scheduler-quick-start.git
cd react-scheduler-quick-start
yarn
yarn startThe component allows simple declarative initialization:
import { useRef } from 'react';
import ReactScheduler, { ReactSchedulerRef, Event, SchedulerTemplates, SchedulerConfig } from '@dhx/trial-react-scheduler';
import "@dhx/trial-react-scheduler/dist/react-scheduler.css";
export interface ReactSchedulerProps {
events: Event[];
activeView?: string;
activeDate?: Date;
}
export default function Scheduler({ events, activeView, activeDate }: ReactSchedulerProps) {
const schedulerRef = useRef<ReactSchedulerRef>(null);
const templates: SchedulerTemplates = {
event_class: (start: Date, end: Date, event: Event) => {
return event.classname || '';
}
};
const config: SchedulerConfig = {
first_hour: 6,
last_hour: 22,
hour_size_px: 60,
};
return (
<ReactScheduler
ref={schedulerRef}
events={events}
view={activeView}
date={activeDate}
templates={templates}
config={config}
data={{
save: (entity: string, action: string, data: any, id: string | number) => {
console.log(`${entity} - ${action} - ${id}`, data);;
}
}}
/>
);Check the Online documentation to find more.
src/
components/Scheduler
Scheduler.tsx <- <ReactScheduler /> component
styles.css <- custom styles for colored events
demoData.ts <- minimal events array
App.tsx <- mounts Scheduler
main.tsx
public/
index.html
Start your 30-day trial to download the complete sample pack.
The code in this repository is released under the MIT License.
@dhx/react-scheduler and @dhx/trial-react-scheduler are commercial libraries - use them under a valid license or evaluation agreement.