@aldabil/react-scheduler

React Scheduler Component

:warning: Notice: This component uses mui/emotion/date-fns. if your project is not already using these libs, this component may not be suitable.

Installation

npm i @aldabil/react-scheduler

Usage

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: { weekDays: [0, 1, 2, 3, 4, 5], weekStartOn: 6, startHour: 9, endHour: 17, cellRenderer?:(props: CellProps) => JSX.Element, navigation: true, disableGoToDay: false }
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, navigation: true, disableGoToDay: false }
day	Object. Day view props. default: { startHour: 9, endHour: 17, step: 60, cellRenderer?:(props: CellProps) => JSX.Element, navigation: true }
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 = { event_id: number or string; title: string; start: Date; end: Date; disabled?: boolean; color?: string; editable?: boolean; deletable?: boolean; draggable?: boolean; allDay?: 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.
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"
timeZone	String, time zone IANA ID: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
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", allDay: "All Day" }, moreEvents: "More...", loading: "Loading..." }
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

useScheduler Hook

used to help manage and control the internal state of the Scheduler component from another component outside of Scheduler props, Example:

import { Scheduler, useScheduler } from "@aldabil/react-scheduler";

const SomeComponent = () => {
  const { triggerDialog, setView } = useScheduler();

  return <Fragment>
    <div>
      <Button onClick={()=>{
        setView("day");
      }}>
        Change View
      </Button>
      <Button onClick={()=>{
        triggerDialog(true, {
          start: /*Put the start date*/,
          end: /*Put the end date*/
        })
      }}>
        Add Event Tomorrow
      </Button>
    </div>

    <Scheduler
      events={EVENTS}
      //...
    />
  </Fragment>
};

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