demo.jsx

import React from 'react';
import { render } from 'react-dom';
import moment from './src/moment-range';
import Dayz from './src/dayz';
require('./demo.scss');
let COUNT = 1;

class DayzTestComponent extends React.Component {
    constructor(props) {
        super(props);
        this.addEvent = this.addEvent.bind(this);
        this.onEventClick = this.onEventClick.bind(this);
        this.editComponent = this.editComponent.bind(this);
        this.changeDisplay = this.changeDisplay.bind(this);
        this.onEventResize = this.onEventResize.bind(this);
        const date = moment('2015-09-11');
        this.state = {
            date,
            display: 'month',
            events: new Dayz.EventsCollection([
                { content: 'Continuing event Past',
                  range: moment.range(moment('2015-09-08'), moment('2015-09-14')) },

                { content: 'Continuing event Before',
                  range: moment.range('2015-09-04', '2015-09-09') },

                { content: 'Weeklong',
                  range: moment.range('2015-09-06', moment('2015-09-12').endOf('day')) },

                { content: 'A Longer Event',
                  range: moment.range(moment('2015-09-04'), moment('2015-09-14')) },

                { content: 'Inclusive',
                  range: moment.range(moment('2015-09-07'), moment('2015-09-12')) },

                { content: '9am - 2pm (resizable)',
                  resizable: { step: 15 },
                  range: moment.range(moment('2015-09-11').hour(9),
                                      moment('2015-09-11').hour(14)) },

                { content: '8am - 8pm (non-resizable)',
                  range: moment.range(moment('2015-09-07').hour(8),
                                      moment('2015-09-07').hour(21).minutes(40)) },
            ]),
        };
    }

    changeDisplay(ev) {
        this.setState({ display: ev.target.value });
    }

    onEventClick(ev, event) {
        event.set({ editing: !event.isEditing() });
    }
    onEventResize(ev, event) {
        const start = event.start.format('hh:mma');
        const end   = event.end.format('hh:mma');
        event.set({ content: `${start} - ${end} (resizable)` });
    }

    addEvent(ev, date) {
        this.state.events.add({
            content: `Event ${COUNT++}`,
            resizable: true,
            range: moment.range(date.clone(), date.clone().add(1, 'hour').add(45, 'minutes')),
        });
    }

    editComponent(props) {
        const onBlur   = function() { props.event.set({ editing: false }); };
        const onChange = function(ev) { props.event.set({ content: ev.target.value }); };
        const onDelete = function() { props.event.remove(); };
        return (
            <div className="edit">
                <input
                    type="text" autoFocus
                    value={props.event.content}
                    onChange={onChange}
                    onBlur={onBlur}
                />
                <button onClick={onDelete}>X</button>
            </div>
        );
    }

    setDate = (ev) => {
        const dte = moment(ev.target.value);
        if (dte.isValid()) {
            this.setState({ ...this.state, date: moment(ev.target.value) });
        }
    }

    render() {
        return (
            <div className="dayz-test-wrapper">

                <div className="tools">
                    <input type="text" onBlur={this.setDate} defaultValue={this.state.date.format('YYYY-MM-DD')} />
                    <label>
                        Month: <input type="radio"
                                      name="style" value="month" onChange={this.changeDisplay}
                                      checked={'month' === this.state.display} />
                    </label><label>
                        Week: <input type="radio"
                                     name="style" value="week" onChange={this.changeDisplay}
                                     checked={'week' === this.state.display} />
                    </label><label>
                        Day: <input type="radio"
                                    name="style" value="day" onChange={this.changeDisplay}
                                    checked={'day' === this.state.display} />
                    </label>
                </div>

                <Dayz {...this.state}
                      displayHours={[6, 22]}
                      highlightDays={[this.state.date]}
                      onEventResize={this.onEventResize}
                      editComponent={this.editComponent}
                      onDayDoubleClick={this.addEvent}
                      onEventClick={this.onEventClick}
                >
                </Dayz>
            </div>
        );
    }
}


const div = document.createElement('div');
document.body.appendChild(div);
render(React.createElement(DayzTestComponent, {}), div);