@mormat/react-scheduler

A google-like scheduler component for React

week view | month view
:-------------------------:|:-------------------------:
!preview | !preview

Demo -
Examples

This is mostly a wrapper of this web component

Available features :
- switch between views day, week or month
- drag and drop events
- create/update/delete events
- few dependencies : only React (>= 17.0.0) and ReactDOM (>= 17.0.0) are required.

Installation

``
npm install @mormat/react-scheduler
`

$3

The following line can be included in your src/index.js or App.js file
`
import '@mormat/react-scheduler/dist/react_scheduler.css'
`

The css can also be loaded using unpkg
`html

rel="stylesheet"
href="https://unpkg.com/@mormat/react-scheduler/dist/react_scheduler.css"
>

`

Usage

$3

`js
import Scheduler from "@mormat/react-scheduler";
`

$3

`js
import { render } from 'react-dom';

const currentDate = "2024-10-08";

const events = [
{ "label": "interview", "start": "2024-10-08 10:00", "bgColor": "#0288d1" },
{ "label": "conference", "start": "2024-10-09 14:00", "end": "2024-10-09 18:00", "bgColor": "#9575cd" },
{ "label": "meeting", "start": "2024-10-11 09:00", "end": "2024-10-11 18:00", "bgColor": "#0fc4a7" },
{ "label": "training course", "start": "2024-10-08 09:00", "end": "2024-10-11 18:00", "bgColor": "#856404" },
]

render(
currentDate = { currentDate }
events = { events }
/>,
document.getElementById('scheduler')
);
`

$3

https://mormat.github.io/react-scheduler/examples.html

Availables props

$3

The events can be defined with a static array or a function for dynamic loading

#### Using an array of objects
Each object should at least contains the attributes below:
| attr | type | description |
|-|-|-|
| label | string | Describe the event |
| start | string|integer|Date | Start of the event. The value must be compliant with the constructor of Date() |
| end | string|integer|Date | End of the event. The value must be compliant with the constructor of Date() |

#### Using a function for dynamic loading

See example here : loading dynamic events

$3

If defined, the scheduler will start displaying events from this date.

The value must be compliant with the constructor of Date()

$3

If defined, the scheduler will start displaying events from this specific view mode.

Expected values are day, week, month

$3

The i18n locale used to format dates.

For instances: en, it, es` ...

$3

A listener called when the user add a event on the scheduler

See example Creating event

$3

A listener called when the user edit a event on the scheduler

See example Edit event

$3

A listener called when the user drop on event on the scheduler

See example Drag and drop event

$3

A listener called when the user resize an event on the scheduler

See example Drag and drop event