https://github.com/mormat/react-scheduler
A google-like scheduler component for React
https://github.com/mormat/react-scheduler
agenda nodejs planner react react-component scheduler
Last synced: about 1 year ago
JSON representation
A google-like scheduler component for React
- Host: GitHub
- URL: https://github.com/mormat/react-scheduler
- Owner: mormat
- License: gpl-2.0
- Created: 2023-03-18T04:51:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-04-30T17:15:10.000Z (about 1 year ago)
- Last Synced: 2025-04-30T17:42:29.885Z (about 1 year ago)
- Topics: agenda, nodejs, planner, react, react-component, scheduler
- Language: JavaScript
- Homepage:
- Size: 497 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @mormat/react-scheduler
A google-like scheduler component for React
week view | month view
:-------------------------:|:-------------------------:
 | 
[Demo](https://mormat.github.io/react-scheduler/) -
[Examples](https://mormat.github.io/react-scheduler/examples.html)
This is mostly a wrapper of this [web component](https://mormat.github.io/jscheduler_ui/)
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
```
### Stylesheet
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](https://unpkg.com)
```html
```
## Usage
### Importing the component
```js
import Scheduler from "@mormat/react-scheduler";
```
### Loading some events
```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(
,
document.getElementById('scheduler')
);
```
### More examples
[https://mormat.github.io/react-scheduler/examples.html](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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) |
| `end` | string|integer|Date | End of the event. The value must be compliant with the constructor of [Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) |
#### Using a function for dynamic loading
See example here : [loading dynamic events](https://mormat.github.io/react-scheduler/examples.html?p=loading_ajax_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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/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](https://mormat.github.io/react-scheduler/examples.html?p=creating_event)
### `onEventEdit`: callback
A listener called when the user edit a event on the scheduler
See example [Edit event](https://mormat.github.io/react-scheduler/examples.html?p=editing_event)
### `onEventDrop`: callback
A listener called when the user drop on event on the scheduler
See example [Drag and drop event](https://mormat.github.io/react-scheduler/examples.html?p=drag_and_drop_event)
### `onEventResize`: callback
A listener called when the user resize an event on the scheduler
See example [Drag and drop event](https://mormat.github.io/react-scheduler/examples.html?p=resize_event)