React Scheduler Component
⚠️ Notice: This component usesmui/emotion/date-fns. if your project is not already using these libs, this component may not be suitable.
Installation
npm i @aldabil/react-schedulerUsage
import { Scheduler } from "@aldabil/react-scheduler";Example
<Scheduler
view="month"
events={[
{
event_id: 1,
title: "Event 1",
start: new Date("2021/5/2 09:30"),
end: new Date("2021/5/2 10:30"),
},
{
event_id: 2,
title: "Event 2",
start: new Date("2021/5/4 10:00"),
end: new Date("2021/5/4 11:00"),
},
]}
/>Scheduler Props
| Prop | Value |
|---|---|
| height | number. Min height of table. Default: 600 |
| view | string. Initial view to load. options: "week", "month", "day". Default: "week" (if it's not null) |
| month | Object. Month view props. default: { |
| week | Object. Week view props. default: { |
| day | Object. Day view props. default: { |
| selectedDate | Date. Initial selected date. Default: new Date() |
| navigation | boolean. Show/Hide top bar date navigation. Default: true |
| navigationPickerProps | CalendarPickerProps for top bar date navigation. Ref: CalendarPicker API |
| disableViewNavigator | boolean. Show/Hide top bar date View navigator. Default: false |
| events | Array of ProcessedEvent. Default: [] type ProcessedEvent = { |
| eventRenderer | Function(event:ProcessedEvent): JSX.Element. A function that overrides the event item render function, see demo Custom Event Renderer below |
| editable | boolean. Whether the event item will show the edit button, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type. |
| deletable | boolean. Whether the event item will show the delete button, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type. |
| draggable | boolean. Whether activate drag&drop for the events, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type. |
| getRemoteEvents | Function(viewEvent). Return promise of array of events. Can be used as a callback to fetch events by parent component or fetch.type ViewEvent = { |
| fields | Array of extra fields with configurations. Example: { |
| loading | boolean. Loading state of the calendar table |
| onConfirm | Function(event, action). Return promise with the new added/edited event use with remote data. action: "add", "edit" |
| onDelete | Function(id) Return promise with the deleted event id to use with remote data. |
| customEditor | Function(scheduler). Override editor modal. Provided prop scheduler object with helper props: { |
| customViewer | Function(event: ProcessedEvent, close: () => void). Used to render fully customized content of the event popper. If used, viewerExtraComponent & viewerTitleComponent will be ignored |
| viewerExtraComponent | Function(fields, event) OR Component. Additional component in event viewer popper |
| viewerTitleComponent | Function(event). Helper function to render custom title in event popper |
| resources | Array. Resources array to split event views with resources Example { |
| resourceFields | Object. Map the resources correct fields. Example: { |
| recourseHeaderComponent | Function(resource). Override header component of resource |
| resourceViewMode | Display resources mode. Options: "default", "tabs" |
| direction | string. Table direction. "rtl", "ltr" |
| dialogMaxWidth | Edito dialog maxWith. Ex: "lg", "md", "sm"... Default:"md" |
| locale | Locale of date-fns. Default:enUS |
| hourFormat | Hour format. Options: "12", "24"...Default: "12" |
| timeZone | String, time zone IANA ID: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones |
| translations | Object. Translations view props. default: { |
| onEventDrop | Function(droppedOn: Date, updatedEvent: ProcessedEvent, originalEvent: ProcessedEvent). Return a promise, used to update remote data of the dropped event. Return an event to update state internally, or void if event state is managed within component |
| onEventClick | Function(event: ProcessedEvent): void. Triggered when an event item is clicked |
| onSelectedDateChange | Function(date: Date): void. Triggered when the selectedDate prop changes by navigation date picker or today button |
| onViewChange | Function(view: View): void. Triggered when navigation view changes |
SchedulerRef
Used to help manage and control the internal state of the Scheduler component from outside of Scheduler props, Example:
import { Scheduler } from "@aldabil/react-scheduler";
import type { SchedulerRef } from "@aldabil/react-scheduler/types"
const SomeComponent = () => {
const calendarRef = useRef<SchedulerRef>(null);
return <Fragment>
<div>
<Button onClick={()=>{
calendarRef.current.scheduler.handleState("day", "view");
}}>
Change View
</Button>
<Button onClick={()=>{
calendarRef.current.scheduler.triggerDialog(true, {
start: /*Put the start date*/,
end: /*Put the end date*/
})
}}>
Add Event Tomorrow
</Button>
</div>
<Scheduler
ref={calendarRef}
events={EVENTS}
//...
/>
</Fragment>
};The calendarRef holds the entire internal state of the Scheduler component. Perhaps the most useful method inside the calendarRef is handleState, example:
calendarRef.current.scheduler.handleState(value, key);
consider looking inside SchedulerRef type to see all fields & methods available.
Demos
- Basic
- Remote Data
- Custom Fields
- Editor/Viewer Override
- Resources/View Mode
- Custom Cell Action
- Custom Event Renderer
Todos
- Tests
- Drag&Drop - partially
- Resizable
- Recurring events
- Localization
- Hour format 12 | 24