React Scheduler Component


Information

A fork of https://github.com/aldabil21/react-scheduler. Please note that this fork may not work. Not a web developer so having a nightmare of a time getting this thing running.

Changes

- Can now customize what happens when clicking on a cell

Installation

``jsx
npm i git+https://github.com/RLangridge/react-scheduler.git
`

Usage

`jsx
import { Scheduler } from "@hightype/react-scheduler";
`

Example

`jsx
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() |
| 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 |

$3

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

$3

- [ ] Tests
- [x] Drag&Drop - partially
- [ ] Resizable
- [ ] Recurring events
- [ ] Localization