react-big-calendar example

timesheet.js

import React       from 'react';
import services    from '../services/index';
import BigCalendar from 'react-big-calendar';
import moment      from 'moment';

import 'react-big-calendar/lib/css/react-big-calendar.css';

// setting to use Saturday as the first day of the week
moment.updateLocale('en-gb', {
  week : {
      dow : 6, // Saturday is the first day of the week.
      doy : 4  // The week that contains Jan 4th is the first week of the year.
  }
});

moment.locale('en-gb');

BigCalendar.momentLocalizer(moment);

const DEFAULT_VIEW        = 'week';
const API_GET_DATE_FORMAT = 'YYYY-MM-DD';

class Timesheet extends React.Component {
  constructor() {
    super();

    this.state = {
      current_date: moment().endOf(DEFAULT_VIEW),
      current_view: DEFAULT_VIEW,
      events: []
    };

    this.bindScopes([
      'onView',
      'onNavigate',
      'updateTimes',
      'timesToEvents'
    ]);

    this.updateTimes();
  }

  bindScopes(keys){
    for(let key of keys){
      this[key] = this[key].bind(this);
    }
  }

  onView(view){
    console.log('#### onView');
    console.log('#### view=', view);

    this.setState({
      current_view: view
    });

    this.updateTimes(this.state.current_date, view);
  }
  onNavigate(date, view){
    console.log('#### onNavigate');
    console.log('#### date=', date);
    console.log('#### view=', view);
    const new_date = moment(date);
    this.setState({
      current_date: new_date
    });

    this.updateTimes(new_date, view);
  }

  updateTimes(date = this.state.current_date, view = this.state.current_view){
    let start, end;
    // if view is day: from moment(date).startOf('day') to moment(date).endOf('day');
    if(view === 'day'){
      start = moment(date).startOf('day');
      end   = moment(date).endOf('day');
    }
    // if view is week: from moment(date).startOf('isoWeek') to moment(date).endOf('isoWeek');
    else if(view === 'week'){
      start = moment(date).startOf('isoWeek');
      end   = moment(date).endOf('isoWeek');
    }
    //if view is month: from moment(date).startOf('month').subtract(7, 'days') to moment(date).endOf('month').add(7, 'days'); i do additional 7 days math because you can see adjacent weeks on month view (that is the way how i generate my recurrent events for the Big Calendar, but if you need only start-end of month - just remove that math);
    else if(view === 'month'){
      start = moment(date).startOf('month').subtract(7, 'days');
      end   = moment(date).endOf('month').add(7, 'days');
    }
    // if view is agenda: from moment(date).startOf('day') to moment(date).endOf('day').add(1, 'month');
    else if(view === 'agenda'){
      start = moment(date).startOf('day');
      end   = moment(date).endOf('day').add(1, 'month');
    }

    services.times.getFrom(start.format(API_GET_DATE_FORMAT), end.format(API_GET_DATE_FORMAT)).then(this.timesToEvents);
  }
  /**
   * This is the result from my endpoint, so it will probably be different for you
   * my endpoint returns a (start) Date and (duration) Minutes
   */
  timesToEvents(times){
    const events = times.map(time => {
      const start_date = moment(time.Date);
      const end_date = start_date.clone().add(time.Minutes, 'minutes');
      return {
        title: time.Incident.lookupName,
        start: start_date.toDate(),
        end:   end_date.toDate()
      };
    })
    console.log(events);
    this.setState({
      events: events
    })
  }

  render(){
    return (
      <div className={'timesheet'}>
        <BigCalendar
          onView={this.onView}
          onNavigate={this.onNavigate}
          events={this.state.events}
          startAccessor={'start'}
          endAccessor={'end'}
          defaultView='week'
        />
      </div>
    );
  }

};

export default Timesheet;