React Scheduler Component
A fork of @aldabil/react-scheduler to suit our needs more specifically.
Installation
npm i @conpago/react-schedulerUsage
import { Scheduler } from "@conpago/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,
step: 60
} |
| day | Object. Month view props. default:
{
startHour: 9,
endHour: 17,
step: 60
} | selectedDate | Date. Initial selected date. Default: new Date() | | | showAddDialog | Boolean Toggle to show/ hide the add event dialog | | 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(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 |
