@madhurdev/react-scheduler v1.0.0

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

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