Sometimes, we want to change color of react-big-calendar events.

In this article, we’ll look at to change color of react-big-calendar events.

How to change color of react-big-calendar events?

To change color of react-big-calendar events, we can set the eventPropGetter prop to a function that returns an object with the style property.

For instance, we write:

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

const localizer = momentLocalizer(moment);

const myEventsList = [
  {
    start: moment().toDate(),
    end: moment().add(1, "days").toDate(),
    title: "Some title"
  }
];

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

We add the Calendar component and set the eventPropGetter prop to a function that returns an object with the style prop set to an object with the styles added.

And we return all the parameter values in the same object to keep the event data.

We populate the event with the events prop.

And we set startAccessor to the 'start' property and endAccessor to the 'end' property of the event objects in myEventList.

Finally, we set the events prop to myEventList to populate the calendar with the events in the array.

Conclusion

To change color of react-big-calendar events, we can set the eventPropGetter prop to a function that returns an object with the style property.