@mormat/react-scheduler
v0.9.0
Published
React scheduler component with draggable events
Downloads
93
Maintainers
mormatReadme
@mormat/react-scheduler
A google-like scheduler component for React
week view | month view
:-------------------------:|:-------------------------:
| 
This is mostly a wrapper of this web component
Available features :
- switch between views
day,weekormonth - drag and drop events
- create/update/delete events
- few dependencies : only
React(>= 17.0.0) andReactDOM(>= 17.0.0) are required.
Installation
npm install @mormat/react-schedulerStylesheet
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
<head>
<link
rel="stylesheet"
href="https://unpkg.com/@mormat/react-scheduler/dist/react_scheduler.css"
>
</head>Usage
Importing the component
import Scheduler from "@mormat/react-scheduler";Loading some events
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(
<Scheduler
currentDate = { currentDate }
events = { events }
/>,
document.getElementById('scheduler')
);More examples
https://mormat.github.io/react-scheduler/examples.html
Availables props
events
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
currentDate: string|date|integer
If defined, the scheduler will start displaying events from this date.
The value must be compliant with the constructor of Date()
viewMode: string
If defined, the scheduler will start displaying events from this specific view mode.
Expected values are day, week, month
dateLocale: string
The i18n locale used to format dates.
For instances: en, it, es ...
onEventAdd: callback
A listener called when the user add a event on the scheduler
See example Creating event
onEventEdit: callback
A listener called when the user edit a event on the scheduler
See example Edit event
onEventDrop: callback
A listener called when the user drop on event on the scheduler
See example Drag and drop event
onEventResize: callback
A listener called when the user resize an event on the scheduler
See example Drag and drop event