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 @madhurdev/react-scheduler

Usage

import { Scheduler } from "@madhurdev/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(): 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 | | 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
• [x] Drag&Drop - partially
• [ ] Resizable
• [ ] Recurring events
• [x] Localization
• [x] Hour format 12 | 24