npm i @aldabil/react-scheduler
import { Scheduler } from "@aldabil/react-scheduler";
<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"),
},
]}
/>
Option | 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() |
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. |
remoteEvents | Function(query: string). Return promise of array of events. Used for remote data. Query returns start and end timestamps as the user navigation changes the dates currently in view. Example query value: ?start=Sat May 08 2021 00:00:00 GMT+0100 (British Summer Time)&end=Thu May 13 2021 23:59:59 GMT+0100 (British Summer Time).Working example visible here: https://codesandbox.io/s/remote-data-j13ei |
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: { |
viewerExtraComponent | Function(fields, event) OR Component. Additional component in event viewer 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" |
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 |
- Basic
- Remote Data
- Custom Fields
- Editor/Viewer Override
- Resources/View Mode
- Custom Cell Action
- Custom Event Renderer
- Tests
- Drag&Drop - partially
- Resizable
- Recurring events
- Localization
- Hour format 12 | 24