React Scheduler Component

A feature-rich, customizable calendar and scheduling component for React applications, forked from @aldabil/react-scheduler with additional features and improvements.

$3

This fork was created to address specific requirements for a project. Not all functionalities have been tested yet.

For documentation, features, and additional usage examples, visit the original npm package page.

Overview

This enhanced React Scheduler component provides comprehensive event scheduling capabilities with multiple view options (day, week, month, agenda), drag-and-drop functionality, and extensive customization options. It is designed to handle both simple and complex scheduling needs seamlessly.

$3

- Replaced date-fns with dayjs.
- Enhanced customDialog option for better dialog state management.
- Added minDate and maxDate options for calendar range limitation.
- Redesigned and refactored component internals for improved performance.
- Introduced enableTodayButton option (automatically activates if "today" is out of the provided date range).
- Added an enableAgenda option for toggling the agenda view.
- Added selectedResource as optional prop for selecting the default resource view.
- Open-sans / Manrope default font.

https://github.com/user-attachments/assets/0b6676f6-18a5-4142-8870-3f2cd3f50356

---

Installation

To install the package:

``bash
npm install @blade47/react-scheduler
``

> Notice: This component uses mui / emotion / dayjs. If your project is not already using these libraries, this component may not be suitable.

---

Usage

$3

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

view="month"
events={[
{
event_id: 1,
title: "Event 1",
start: new Date("2021/05/02 09:30"),
end: new Date("2021/05/02 10:30"),
},
{
event_id: 2,
title: "Event 2",
start: new Date("2021/05/04 10:00"),
end: new Date("2021/05/04 11:00"),
},
]}
/>;
`

$3

All props are optional.

| Prop | Value | Default |
|-------------------|------------------------------------------------------------------------------------|---------|
| minDate | Date. Minimum date of the calendar. | null |
| maxDate | Date. Maximum date of the calendar. | null |
| enableTodayButton | boolean. Show/Hide today button. | true |
| customDialog | Function(open: boolean, props: DialogProps): JSX.Element. Custom dialog component. | null |
| enableAgenda | boolean. Show/Hide agenda view. | true |
| selectedResource | string. Default resource view. | null |

$3

Here are the original props supported by the library.

Click here to see the full list

---

$3

The SchedulerRef allows control over the internal state of the Scheduler component from outside its props.
Here's a usage example:

`js
import { Scheduler, SchedulerRef } from "@blade47/react-scheduler";

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

return




};
`

You can utilize handleState for dynamic control:

`
calendarRef.current.scheduler.handleState(value, key);
``

$3

- Basic
- Remote Data
- Custom Fields
- Editor/Viewer Override
- Resources/View Mode
- Custom Cell Action
- Custom Event Renderer

$3

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