Scheduler

The RhScheduler is a component that creates a scheduler or timetable interface for managing events over a specific period.

Usage

Once installed, you can import the RhScheduler component into your React application:

copy

import {RhScheduler} from "@rhythm-ui/react"

Then, you can use the RhScheduler component in your JSX code:

copy

<RhScheduler onChange={(v) => console.log("value:", v)} />

Scheduler Props

Name	Type	Default	Description
interval	number	15	The interval prop accepts a value as a number and generates a time interval for the scheduler according to the given interval value.
value	Record<string, valueDay>		The value prop accepts the same object and its structure as it gives the output structure. It fills up the whole component with predefined data. This is helpful when we add edit functionality for this component.
onChange	(value: any) => void		The onChange prop act as the function that takes an object every time a change happens in the scheduler component.

Interval

The interval prop sets the length of time intervals in minutes that are displayed in the scheduler component. It accepts a numerical value and can be adjusted to display different interval lengths.

copy

<RhScheduler onChange={(v) => console.log("value:", v)} interval={120} />

Value

The value prop pre-populates the scheduler component with predefined data. It is a record object with string keys and values for adding edit functionality to the component.

copy

<RhScheduler
  onChange={(v) => console.log("value:", v)}
  value={{
    Friday: {
      errorMessage: {
        orderError: undefined,
        overlapError: null,
        wrongTimeError: undefined,
      },
      isDayChecked: true,
      isInitialTime: true,
      timeData: [
        {
          id: "68cmfb83.15g",
          time: {
            end: "3:00 am",
            start: "1:15 am",
          },
        },
      ],
    },
    Monday: {
      errorMessage: "",
      isDayChecked: false,
      isInitialTime: false,
      timeData: [],
    },
    Saturday: {
      errorMessage: "",
      isDayChecked: false,
      isInitialTime: false,
      timeData: [],
    },
    Sunday: {
      errorMessage: "",
      isDayChecked: false,
      isInitialTime: false,
      timeData: [],
    },
    Thursday: {
      errorMessage: "",
      isDayChecked: false,
      isInitialTime: false,
      timeData: [],
    },
    Tuesday: {
      errorMessage: "",
      isDayChecked: true,
      isInitialTime: true,
      timeData: [
        {
          id: "4rxlw1ds.va9",
          time: {
            end: "1:00 am",
            start: "0:45 am",
          },
        },
      ],
    },
    Wednesday: {
      errorMessage: "",
      isDayChecked: false,
      isInitialTime: false,
      timeData: [],
    },
  }}
/>