https://github.com/Legitcode/scheduler
A pure React implementation of a drag and drop scheduler
https://github.com/Legitcode/scheduler
Last synced: 6 months ago
JSON representation
A pure React implementation of a drag and drop scheduler
- Host: GitHub
- URL: https://github.com/Legitcode/scheduler
- Owner: Legitcode
- License: mit
- Created: 2015-09-07T06:13:56.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-23T15:25:52.000Z (almost 8 years ago)
- Last Synced: 2025-07-12T12:35:12.367Z (6 months ago)
- Language: JavaScript
- Homepage: http://legitcode.github.com/scheduler
- Size: 2.45 MB
- Stars: 114
- Watchers: 8
- Forks: 23
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://codetree.com/projects/Q6Rz)
# Legit Scheduler
A pure React implementation of a drag and drop scheduler
## Usage
Install it:
```bash
$ npm install --save legit-scheduler
```
Import it:
```js
import Scheduler from 'legit-scheduler'
```
The scheduler component has three required props:
`events` - An array of event objects
`resources` - An array of resources
`width` - The width of the scheduler container, in pixels. An integer.
The resources array is just strings:
```
['Resource 1', 'Resource 2', 'Resource 3']
```
The events array is an array of objects:
```
{
title: 'A great event', // Required: The title of the event
startDate: '2016-01-24', // Required: The start date, must be in the format of "YYYY-MM-DD"
duration: 4, // Required: The duration of the event in days
resource: 'Resource 1', // Required: The name of the resource the event belongs to. Must match the resource name from the resources prop
id: '3829-fds89', // Required: A unique identifier. This can be anything you want as long as it's unique
disabled: false, // Optional: Whether or not this event can be moved (it can still be resized). Defaults to false.
styles: {} // Optional: An object of styles to apply to the event object
}
```
The scheduler component also takes more optional props:
`onEventChanged` - A call back that is fired when the event is moved. It receives an object containing the new event props
`onEventResized` - A call back that is fired when the event is resized. It receives an object containing the new event props
`onEventClicked` - A call back that is fired when the event is clicked. It receives an object containing the event props
`onCellClicked` - A call back that is fired when an empty cell on the scheduler is clicked. It receives the date and resource name as props
`onRangeChanged` - A call back that is fired when the date range is changed. It receives a `DateRange` object with the new range.
`from` - Either a date string or a `RangeDate` object defining the start date for the range.
`to` - Either a date string or a `RangeDate` object defining the end date for the range.
## Development
```bash
$ npm install
$ npm run example
```
Visit: `localhost:8080/example`