@aldabil/react-scheduler

Ract Scheduler Component

Installation

npm i @aldabil/react-scheduler

Peer Dependencies

npm i @material-ui/core @material-ui/icons date-fns

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"),
    },
  ]}
/>

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, }
week	Object. Month view props. default: { weekDays: [0, 1, 2, 3, 4, 5], weekStartOn: 6, startHour: 9, endHour: 17, }
day	Object. Month view props. default: { startHour: 9, endHour: 17 }
selectedDate	Date. Initial selected date. Default: new Date()
events	Array of Objects. Default: []
remoteEvents	Function(query: string). Return promise of array of events. Used for remote data
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(fields). Override editor modal
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"

Demos

• Basic
• Remote Data
• Custom Fields
• Editor/Viewer Override
• Resources/View Mode

Todos

• Tests
• Drag&Drop
• Recurring events
• Localization