Bryntum Scheduler - A new scheduling component that's easily integrated with React


(Mats Bryntse) #1

We just released a brand new JavaScript scheduler UI component which includes 40+ demos including a React integration demo. There’s also great API documentation and guides to get you started.

Read more in our 1.0 release blog post

Live examples

API Docs

Basic code sample of adding the Schedule to a React app:

/* eslint-disable */

class App extends React.Component {

    state = {
        barMargin : 5,
        selectedEvent : ''
    };

    handleBarMarginChange = event => {
        this.setState({ barMargin : parseInt(event.target.value) });
    };

    handleAddClick = () => {
        // Add new event to scheduler
        this.refs.scheduler.addEvent();
    };

    handleRemoveClick = () => {
        // Remove selected event from the scheduler
        this.refs.scheduler.removeEvent();
        this.setState({ selectedEvent : '' });
    };

    handleSelectionChange = ({selected, mode}) => {
        this.setState({ selectedEvent : selected.length && selected[0].name || '' });
    };

    componentDidMount() {
        const scheduler = this.refs.scheduler;

        fetch('data/data.json').then(response => {
            response.json().then(data => {
                this.setState({
                    // Increment these to notify BryntumScheduler that it should process events/resources
                    eventsVersion : 1,
                    resourcesVersion : 1,

                    events     : data.events.rows,
                    resources  : data.resources.rows,
                    timeRanges : data.timeRanges.rows
                });
            });
        });
    }

    render() {
        return (
            <div>
                <div id="tools">
                    <button onClick={this.handleAddClick}>Add event</button>
                    <button disabled={this.state.selectedEvent == ''} className="red" onClick={this.handleRemoveClick}>Remove event</button>

                    <label className="selected-event">Selected event: <span>{this.state.selectedEvent||'None'}</span></label>

                    <div className="barmargin">
                        <label>Barmargin:</label>
                        <input min="0" max="10" type="number" value={this.state.barMargin} onChange={this.handleBarMarginChange}/>
                    </div>
                </div>

                <BryntumScheduler
                    ref={'scheduler'}

                    // Make grid grow to fit rows
                    autoHeight={true}

                    // Initial row height
                    barMargin={this.state.barMargin}

                    eventsVersion={this.state.eventsVersion}
                    resourcesVersion={this.state.resourcesVersion}
                    events={this.state.events}
                    resources={this.state.resources}

                    startDate={new Date(2017, 1, 7, 8)}
                    endDate={new Date(2017, 1, 7, 18)}

                    // Columns in scheduler
                    columns={[
                            {
                                type    : 'resourceInfo', imagePath : '../_shared/images/users/',
                                text    : 'Staff',
                                width   : 130
                            },
                            {
                                text    : 'Type',
                                field   : 'role',
                                width   : 130
                            }
                        ]}

                    onEventSelectionChange={this.handleSelectionChange}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);