React Scheduler Component

A fork of @aldabil/react-scheduler to suit our needs more specifically.

Installation

npm i @conpago/react-scheduler

Usage

import { Scheduler } from "@conpago/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, cellRenderer?:(props: CellProps) => JSX.Element }
week	Object. Week view props. default: { weekDays: [0, 1, 2, 3, 4, 5], weekStartOn: 6, startHour: 9, endHour: 17, step: 60, cellRenderer?:(props: CellProps) => JSX.Element }
day	Object. Day view props. default: { startHour: 9, endHour: 17, step: 60, cellRenderer?:(props: CellProps) => JSX.Element }
selectedDate	Date. Initial selected date. Default: new Date()
events	Array of ProcessedEvent. Default: [] type ProcessedEvent = { event_id: number or string; title: string; start: Date; end: Date; disabled?: boolean; color?: string; editable?: boolean; deletable?: boolean; draggable?: boolean; }
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	⚠️ Deprecated 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
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 = { start: Date; end: Date; view: "day" | "week" | "month"; }
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
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
hourFormat	Hour format. Options: "12", "24"...Default: "12"
translations	Object. Translations view props. default: { navigation: { month: "Month", week: "Week", day: "Day", today: "Today" }, form: { addTitle: "Add Event", editTitle: "Edit Event", confirm: "Confirm", delete: "Delete", cancel: "Cancel" }, event: { title: "Title", start: "Start", end: "End" }, moreEvents: "More..." }
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
• Custom Event Renderer