Skip to content

React scheduler component based on Material-UI & date-fns

License

Notifications You must be signed in to change notification settings

asurraa-labs/react-scheduler

 
 

Repository files navigation

React Scheduler Component

npm package Twitter URL

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

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,
cellRenderer?:(props: CellProps) => JSX.Element
}
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
}
day Object. Day view props.
default:
{
startHour: 9,
endHour: 17,
step: 60,
cellRenderer?:(props: CellProps) => JSX.Element
}
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. Query returns start and end timestamps as the user navigation changes the dates currently in view. Example query value:
?start=Sat May 08 2021 00:00:00 GMT+0100 (British Summer Time)&end=Thu May 13 2021 23:59:59 GMT+0100 (British Summer Time).
Working example visible here: https://codesandbox.io/s/remote-data-j13ei
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
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

Demos

Todos

  • Tests
  • Drag&Drop - partially
  • Resizable
  • Recurring events
  • Localization

About

React scheduler component based on Material-UI & date-fns

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.7%
  • HTML 1.7%
  • Other 0.6%