React Scheduler Component

Installation

yarn add robko23/react-scheduler

Usage

import { Scheduler } from "@robko23/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 (TODO)

Option	Value
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: []
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(): void loading(status: boolean): void edited?: ProcessedEvent onConfirm(event: ProcessedEvent, action:EventActions): void }
viewerExtraComponent	Function(fields, event) OR Component. Additional component in event viewer popper
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

TODO

Todos

• Tests
• Drag&Drop - partially
• Resizable
• Localization