Add a Calendar to a React App with react-big-calendar

With the react-big-calendar library, we can add a calendar to a React app.

In this article, we’ll look at how to add a calendar with it.

Getting Started

We can install it by running:

npm install --save react-big-calendar

or:

yarn add react-big-calendar

Then we can use it by writing:

import React from "react";
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);

const myEventsList = [
  { start: new Date(), end: new Date(), title: "special event" }
];

export default function App() {
  return (
    <div className="App">
      <Calendar
        localizer={localizer}
        events={myEventsList}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  );
}

We add the moment library to provide localization with the momentLocalizer function.

events has an array of events.

startAccessor is the property for the start date of events.

endAccessor is the property for the end date of events.

We can also use date-fns for localization.

To do that, we write:

import React from "react";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import format from "date-fns/format";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";
import getDay from "date-fns/getDay";
import "react-big-calendar/lib/css/react-big-calendar.css";

const locales = {
  "en-US": require("date-fns/locale/en-US")
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales
});

const myEventsList = [
  { start: new Date(), end: new Date(), title: "special event" }
];

export default function App() {
  return (
    <div className="App">
      <Calendar
        localizer={localizer}
        events={myEventsList}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  );
}

We only change how the localizer is created.

The localizer determines how dates are formatted.

With both examples, we should see a calendar with some events displayed.

format is a function to format dates.

parse is a function to parse dates.

startOfWeek is the day value for the start of the week for a given locale.

getDay is a function to get the day from a date.

locales is an array of locales.

Custom Styling

We can also add SASS styles provided by the library to style our calendar.

We can add them by writing:

@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/lib/addons/dragAndDrop/styles';

We need the 2nd line if we’re using drag and drop.

Drag and Drop

We can make calendar events draggable by using the withDragAndDrop higher order component to create a calendar component that we can drag events with.

For example, we can write:

import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = momentLocalizer(moment);

const events = [{ start: new Date(), end: new Date(), title: "special event" }];

const DnDCalendar = withDragAndDrop(Calendar);

class App extends React.Component {
  state = {
    events
  };

onEventResize = (data) => {
    const { start, end } = data;

    this.setState((state) => {
      state.events[0].start = start;
      state.events[0].end = end;
      return { events: state.events };
    });
  };

  onEventDrop = (data) => {
    console.log(data);
  };

  render() {
    return (
      <div className="App">
        <DnDCalendar
          defaultDate={moment().toDate()}
          defaultView="month"
          events={this.state.events}
          localizer={localizer}
          onEventDrop={this.onEventDrop}
          onEventResize={this.onEventResize}
          resizable
          style={{ height: "100vh" }}
        />
      </div>
    );
  }
}

export default App;

to add create the DndCalendar component with the HOC.

The props are the same as the other examples.

resizable makes the calendar resizable.

Conclusion

The react-big-calendar package is an easy to use calendar package for React apps.