React Scheduler Component

Installation

npm i @arshadrao/react-scheduler

Usage

import { Scheduler } from "@arshadrao/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"),
    },
  ]}
/>

Options

| 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: {weekDays: [0, 1, 2, 3, 4, 5], weekStartOn: 6, startHour: 9, endHour: 17,} | | week | Object. Month view props. default: { weekDays: [0, 1, 2, 3, 4, 5], weekStartOn: 6, startHour: 9, endHour: 17,step: 60 } | | day | Object. Month view props. default: {startHour: 9, endHour: 17, step: 60 } | | selectedDate | Date. Initial selected date. Default: new Date() | | events | Array of Objects. Default: [] | | 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: { name: "description", type: "input" , config: { label: "Description", required: true, min: 3, email: true, variant: "outlined", ....} | | 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: {state: state obj, close(): voidloading(status: boolean): voidedited?: ProcessedEventonConfirm(event: ProcessedEvent, action:EventActions): void} | | viewerExtraComponent | Function(fields, event) OR Component. Additional component in event viewer popper | | resources | Array. Resources array to split event views with resources Example {assignee: 1,text: "User One", subtext: "Sales Manager", avatar: "https://picsum.photos/200/300", color: "#ab2d2d", } | | resourceFields | Object. Map the resources correct fields. Example: { idField: "admin_id", textField: "title", subTextField: "mobile", avatarField: "title", colorField: "background", } | | 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 | | 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 |

Demos

• Basic
• Remote Data
• Custom Fields
• Editor/Viewer Override
• Resources/View Mode
• Custom Cell Action

Todos

• [ ] Tests
• [x] Drag&Drop - partially
• [ ] Resizable
• [ ] Recurring events
• [ ] Localization