React Scheduler

A scheduler and resource planning component built for React and made for modern browsers (IE10+) .

Use and Setup

npm install @xroadsed/react-scheduler --save

The scheduler is a mobx component that allows you to pass callbacks to interact with the various features, it invokes these callbacks in response to certain events.

An example of how to create a scheduler component:

This code can be found in Example/MasterScheduler.js

@observer
export default class MasterScheduler extends React.Component {
    constructor(props) {
        super(props);

        this.props.MasterScheduleStore.init();
    }

    render() {
        const { MasterScheduleStore: Store } = this.props;
        return (
            <div style={{width: "100%",height: "100%"}}>
                <DevTools />
                <div style={{width: 1600,height: 800}}>
                    <Datepicker 
                        currentDate={Store.schedulerStore.currentDate} 
                        incrementDate={Store.schedulerStore.incrementDate}
                        decrementDate={Store.schedulerStore.decrementDate}
                    />
                    <Scheduler
                        schedulerStore={Store.schedulerStore}
                    />
                </div>
            </div>
        )
    }
}

The Scheduler Store that runs internally is constructed like this:

This code can be found in example/Stores/MasterStore.js

class MasterScheduleStore {
    schedulerStore;

    constructor() {}
    
    init() {    
        const r = _.cloneDeep( MasterDemoData.resources );
        const e = _.cloneDeep( MasterDemoData.events );

        const schedule = new SchedulerStore( 
           {
              resources: r,
              events: e,
              startTime: 6,
              endTime: 18,
              currentDay: 5,
              activeLayer: 3,
              backgroundLayer: 1,
              renderLayers: {3: {
                  event: ShiftEvent,
                  resizer: ShiftResizer
              }},
              renderResource: ResourceComponent,
              renderPopover: PopoverComponent,
              renderAdornment: AdornmentComponent,
              resizeEvent: this.resizeEvent,
              stopResize: this.stopResize,
              createEvent: this.createEvent,
              displayHeaders: true
           }
        );

        this.schedulerStore = schedule;
    }

    @action resizeEvent = (newTime, event, timeChanged) => {
        event[timeChanged] = newTime.format("HH:mm:ss");
        event.componentProps[timeChanged] = newTime.format("HH:mm:ss");
    }

    @action stopResize = () => {}

    @action createEvent = (newEvent, resource, startTime) => {
        const start = this.schedulerStore.date.start.clone().add(startTime, "hours").format("HH:mm:ss");
        const end = this.schedulerStore.date.start.clone().add(startTime + .5, "hours").format("HH:mm:ss");
        const event = new EventModel({
            ...newEvent, 
            ...{
                start, 
                end, 
                resizable: true,
                componentProps: {
                    backgroundColor: "#3091FF"
                }
            }
        });
        resource.events.push(event);
    }
}
}

Run examples locally

• Clone this repository

• Retrieve dependencies: npm install

• Start: npm run start

• Open http://localhost:9000

API

The SchedulerStore, EventModel, and ResourceModel expose the API and interactions available within the package.

SchedulerStore

Constructor

The SchedulerStore is constructed with an object with the following properties:

constructor( 
       init = {
           resources: [],
           events: [],
           
           renderLayers: {},
           renderResource: undefined,
           renderPopover: undefined,
           renderAdornment: undefined,
           activeLayer: undefined,
           backgroundLayer: undefined,

           resizeEvent: undefined,
           stopResize: undefined,
           createEvent: undefined,

           startTime: "",
           endTime: "",
           currentDay: undefined,
           
       } 
   )

Resources

A Resource is the aggregating property of the row of events, like a user or a class. It should be passed with the following format.

type Resource = {
    id: number | string;
    componentProps: {} This contains props you want to spread on the component being rendered. See /Example/MasterDemoData.js for an example.
}

Events

The main focus of the Scheduler is to interact with Events, and have the following type:

type Event = { 
    id: number;
    start: "HH:mm:ss" These times are used when constructing moments, so its vital this format is maintained.
    end: "HH:mm:ss" 
    day: number; 
    layer: number; // What layer (zIndex) to render the events on. This allows stacking events on top of each other.
    resizable: boolean;  // Allows resizability functionality, and will render the resizers when `true`
}

RenderLayers

The primary render methods for rendering events.

type RenderLayers = {
    [layer number]: {
        event: Component wrapped in the EventComponentWrapper HOC,
        resizer: React Component | Component Class; This will not receive props.
    }
}

RenderResource

The render method for rendering resources. Unlike events, the resources don't need to be wrapped in a higher order component. The Resources are rendered in a list order dependent on the array in which they're initially passed. The resource component recieves the props defined in the resource object used in the scheduler's construction. See:

{schedulerStore.resources.map(resource => (
    <div className={classes.rowContainer} key={resource.id}>
        <div className={classes.resourceContainer} ref={this.resourceRef} >
            <ui.renderResource {...resource.componentProps} resource={resource} />
        </div> 

RenderPopover

The Render method for popovers when an event in the active layer is clicked. THe component you want to be rendered in the Popover should be passed into the PopoverWrapper higher order component.

type RenderPopover = FunctionalComponent | ComponentClass

RenderAdornment

The render method for end of row adornments. Multiple adornments can be wrapped up in one component. The adornment component does not need to be wrapped in a HOC, and it receives the entire ResourceModel

type RenderAdornment = FunctionalComponent | ComponentClass

ActiveLayer

The rendered layer that receives mouse click events and can be interacted with. Its assumed all other events are background information and can't be interacted with.

type ActiveLayer: number

BackgroundLayer

The layer that the background is rendered in. Any elements with a lower zIndex will not be visible.

type BackgroundLayer: number

ResizeEvent

The callback fired everytime an event is resized 1/2 half hour. The callback fires with a newTime, the time changed, and the event being changed.

type ResizeEvent: (newTime: moment, event: EventModel, timeChanged: start | end) => void;

StopResize

Callback fired when an event is doing being resized. Currently cleans up internal calculation values and ignores functions passed.

CreateEvent

Callback fired when an empty area on the scheduler is clicked, and presently fires with the new event object (not yet actually added), the resource its being added to, and the startTime.

type CreateEvent: (newEvent: EventModel, resource: ResourceModel, startTime: float

StartTime

The hour at which to start the schedule at.

type StartTime: number;

EndTime

The hour at which the schedule ends at.

type EndTime: number;

CurrentDay

Day of the week to start rendering at. Events are organized by day rather than date, this is to create maintainable and reusable weekly schedules.

type CurrentDay: 0 | 1 | 2 | 3 | 4 | 5 | 6