Getting react-big-calendar to work.

react-big-calendar.png

Recently, a popular React calendar library (react-big-calendar) went through an upgrade which introduced breaking changes and made many of the online tutorials and documentation irrelevant.

The breaking change comes from the fact that BigCalendar is no longer an item being exported from the API (link to GitHub change). It took me some time of digging around to realize why I was getting major “undefined” errors while trying to get the most basic version of the calendar working. As of writing this, even the demo website has outdated code examples. I hope this code saves you some time.

The code: #

This calendar demo uses react-big-calendar version 0.22.0 and moment.js version 2.24.0.

Here is a link to a code sandbox with a working demo.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const localizer = momentLocalizer(moment);

class App extends Component {
  constructor() {
    const now = new Date();
    const events = [
      {
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2019, 6, 0),
          end: new Date(2019, 6, 1),
      },
      {
          id: 1,
          title: 'Long Event',
          start: new Date(2019, 3, 7),
          end: new Date(2019, 3, 10),
      },
      {
          id: 2,
          title: 'Right now Time Event',
          start: now,
          end: now,
      },
    ]
    this.state = {
      events
    };
  }

  render() {
    return (
        <div style={{ height: '500pt'}}>
          <Calendar
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            defaultDate={moment().toDate()}
            localizer={localizer}
          />
        </div>
    );
  }
}

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

Things to keep in mind #

It appears as though the font on the calendar doesn’t exactly match the calendar on the demo website. You will need to create your own CSS rules for the fonts you would like on the calendar.

The other thing to keep in mind (which isn’t mentioned on the documentation) is that you need to provide a fixed height (in the above case height: '500pt') for the parent element of the calendar otherwise the month view shrinks and breaks.

 
26
Kudos
 
26
Kudos

Now read this

3 apps that every college student should use

These apps will super-charge your life. They’ll make you more productive than you’ve ever been. They’ll pretty much write that 900 word essay you’ve been procrastinating on. Here’s a list of 3 incredibly sexy apps that are available on... Continue →