React Scheduler Component


> ⚠️ Notice: This component uses @mui/material, @emotion/react, and date-fns.
> If your project is not already using these libs, this component may not be suitable.

---

Installation

``bash
npm i @ilkerdeveloper/react-scheduler-packages
``

If you plan to use recurring events in your scheduler, install rrule as well:
https://www.npmjs.com/package/rrule

---

Usage

`tsx
import { Scheduler } from "@ilkerdeveloper/react-scheduler-packages";
`

$3

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

---

Scheduler Props

All props are optional

| Prop | Value / Description | | |
| ----------------------- | ----------------------------------------------------------------------------------------- | --------------------- | ------------------- |
| height | number. Min height of table. Default: 600 | | |
| view | string. Initial view to load. Options: "week", "month", "day". Default: "week" | | |
| agenda | boolean. Activate agenda view | | |
| alwaysShowAgendaDays | boolean. If true, day rows without events will be shown | | |
| month | Object. Month view props. Default: see src/defaults.ts | | |
| week | Object. Week view props. Default: see src/defaults.ts | | |
| day | Object. Day view props. Default: see src/defaults.ts | | |
| selectedDate | Date. Initial selected date. Default: new Date() | | |
| navigation | boolean. Show/Hide top bar date navigation. Default: true | | |
| events | Array of ProcessedEvent. Default: [] | | |
| eventRenderer | Function(event: ProcessedEvent): React.ReactNode | | |
| editable | boolean. Enable/disable editing of events | | |
| deletable | boolean. Enable/disable deleting events | | |
| draggable | boolean. Enable/disable drag & drop | | |
| getRemoteEvents | Function(RemoteQuery). Return promise of array of events | | |
| fields | Array of extra fields with configurations | | |
| loading | boolean. Loading state of the calendar table | | |
| onConfirm | Function(event, action). Returns promise with new/edited event | | |
| onDelete | Function(id). Returns promise with deleted event id | | |
| customEditor | Function(scheduler). Override editor modal | | |
| customViewer | Function(event: ProcessedEvent, close: () => void). Override event viewer content | | |
| viewerExtraComponent | Additional component in event viewer popper | | |
| viewerTitleComponent | Custom title in event popper | | |
| viewerSubtitleComponent | Custom subtitle in event popper | | |
| disableViewer | boolean. Disable the viewer popover globally | | |
| resources | Array. Resources array to split event views | | |
| resourceFields | Object. Map resource fields correctly | | |
| resourceHeaderComponent | Function(resource). Override header component of resource | | |
| resourceViewMode | Display resources mode: "default" | "vertical" | "tabs" |
| onResourceChange | Function(resource). Triggered when resource tab changes | | |
| direction | string. "rtl" | "ltr" | |
| dialogMaxWidth | Editor dialog max width. Ex: lg | md | sm. Default: md |
| locale | Locale of date-fns. Default: enUS | | |
| hourFormat | "12" | "24". Default: 12 | |
| timeZone | String. Time zone IANA ID | | |
| translations | Object. Translations for UI texts. Default in src/defaults.ts | | |
| onEventDrop | Function(event, droppedOn, updatedEvent, originalEvent). Returns promise | | |
| onEventClick | Function(event). Triggered on event click | | |
| onEventEdit | Function(event). Triggered when editing an event | | |
| onCellClick | Function(start, end, resourceKey?, resourceVal?). Triggered on cell click | | |
| onSelectedDateChange | Function(date). Triggered when selectedDate changes | | |
| onViewChange | Function(view, agenda?). Triggered when navigation view changes | | |
| stickyNavigation | boolean. Sticky top navigation bar | | |
| onClickMore | Function(date, goToDay). Triggered when “More…” button is clicked | | |

---

SchedulerRef

Used to manage internal state from outside:

`tsx
import { Scheduler } from "@ilker09091/react-scheduler-packages";
import type { SchedulerRef } from "@ilker09091/react-scheduler-packages/types";
import { useRef, Fragment } from "react";
import { Button } from "@mui/material";

const SomeComponent = () => {
const calendarRef = useRef(null);

return (

onClick={() => {
calendarRef.current.scheduler.handleState("day", "view");
}}
>
Change View

onClick={() => {
calendarRef.current.scheduler.triggerDialog(true, {
start: new Date(),
end: new Date(),
});
}}
>
Add Event Tomorrow

);
};
`

calendarRef.current.scheduler.handleState(value, key)` ile tüm iç state’e erişebilirsin.

---

Demo

* Remote Data Demo

---

Todos

* [ ] Tests
* [x] Drag & Drop - partially
* [ ] Resizable
* [x] Recurring events - partially
* [x] Localization
* [x] Hour format 12 | 24

---