0.3.2 • Published 8 years ago

legit-scheduler v0.3.2

Weekly downloads
11
License
MIT
Repository
github
Last release
8 years ago

Codetree

Legit Scheduler

A pure React implementation of a drag and drop scheduler

Usage

Install it:

$ npm install --save legit-scheduler

Import it:

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

$ npm install
$ npm run example

Visit: localhost:8080/example

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.6

9 years ago

0.1.5

9 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago