Skip to content

Commit 35cc914

Browse files
committed
[Doc] Mention Scheduler in All Features
1 parent 854aa97 commit 35cc914

File tree

2 files changed

+46
-0
lines changed

2 files changed

+46
-0
lines changed

docs/Features.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1089,6 +1089,52 @@ const App = () => (
10891089

10901090
Check out the [Soft Delete Documentation](./SoftDeleteDataProvider.md) to learn more.
10911091

1092+
## Scheduler
1093+
1094+
React-admin can integrate with [Bryntum Scheduler](https://bryntum.com/products/scheduler/), a modern and high-performance scheduling system, to let you manage tasks, assignments, events, scheduling constraints and dependencies, completion, recurring events, property booking, skill matrix, nested events, etc.
1095+
1096+
![Custom Scheduler](./img/custom-scheduler.webp)
1097+
1098+
It supports drag and drop, infinite scroll, zoom, custom layout and styling, collapsible columns, localization, grouping and filtering and export to pdf. You can use it with any backend, as it leverages react-admin's data provider architecture.
1099+
1100+
Use the [`<Scheduler>`](./Scheduler.md) component as the `list` of a [`<Resource>`](./Resource.md):
1101+
1102+
```tsx
1103+
// in ./src/App.tsx
1104+
import { Admin, Resource } from 'react-admin';
1105+
import { dataProvider } from './dataProvider';
1106+
import { EventList } from './events/EventList';
1107+
1108+
export const MyAdmin = () => (
1109+
<Admin dataProvider={dataProvider}>
1110+
<Resource name="events" list={EventList} />
1111+
</Admin>
1112+
);
1113+
1114+
// in ./src/events/EventList.tsx
1115+
import { Scheduler } from '@react-admin/ra-scheduler';
1116+
import '@bryntum/core-thin/core.material.css';
1117+
import '@bryntum/grid-thin/grid.material.css';
1118+
import '@bryntum/scheduler-thin/scheduler.material.css';
1119+
import { endOfDay, startOfDay } from 'date-fns';
1120+
1121+
export const EventList = () => (
1122+
<Scheduler
1123+
columns={[{ text: 'Name', field: 'name', width: 130 }]}
1124+
viewPreset="hourAndDay"
1125+
startDate={startOfDay(new Date())}
1126+
endDate={endOfDay(new Date())}
1127+
/>
1128+
);
1129+
```
1130+
1131+
<video controls autoplay playsinline muted loop>
1132+
<source src="https://react-admin-ee.marmelab.com/assets/ra-scheduler.mp4" type="video/mp4"/>
1133+
Your browser does not support the video tag.
1134+
</video>
1135+
1136+
Check out the [Scheduler documentation](https://react-admin-ee.marmelab.com/documentation/ra-scheduler) to learn more.
1137+
10921138
## Calendar
10931139

10941140
If your app needs to display **events**, **appointments**, **time intervals**, or any other kind of time-based data, you can use the [`<Calendar>`](./Calendar.md) component.

docs/img/custom-scheduler.webp

62.5 KB
Loading

0 commit comments

Comments
 (0)