Cacher is the code snippet organizer for pro developers

import React from 'react';
import Calendar from 'deskbookers-calendar';
import moment from 'moment';

Calendar.momentLocalizer(moment);

class TheCalendar extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      events: this.props.events,
      view: 'day'
    }
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      events: nextProps.events
    })
  }

  updateEventTime(StartDateTime, EndDateTime) {
    this.props.updateEventTime(StartDateTime, EndDateTime);
  }

  displayEditEventForm(eventId) {
    const active = true
    this.props.enterEditMode({active, eventId});
  }

  render() {

    let formats = {

      // formats the day and week view tp '03/12'
      dayFormat: (date, culture, localizer) =>
        localizer.format(date, 'MM/DD', culture),

      // formats the top of day view to '03/12'
      dayHeaderFormat: (date, culture, localizer) =>
        localizer.format(date, 'MM/DD', culture),
    }
    console.log(this.props.resources);
    console.log(this.props.events);
    return(
      <div className="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--8-of-12">
        <Calendar
          selectable
          popup

          startAccessor='StartDateTime'
          endAccessor='EndDateTime'
          titleAccessor='Subject'
          allDayAccessor='IsAllDayEvent'

          style={{height: 800}}

          onView={ view =>
            this.setState({view})
          }

          events={this.props.events}
          resources={this.props.resources}
          formats={formats}
          view={this.state.view}

          onSelectEvent={event =>
            this.displayEditEventForm(event.Id)}
          onSelectSlot={slotInfo =>
            this.updateEventTime(slotInfo.start.toLocaleString(), slotInfo.end.toLocaleString())}
        />
      </div>
    );
  }
}

export default TheCalendar;