react-big-calendar: A Flexbox-Based Events Calendar Component for React

What react-big-calendar Is and Who It Is For

Building a calendar component for React that displays events across month, week, and day views is more work than it looks. Positioning events by time, handling overlapping events, managing time zone display, and keeping keyboard and accessibility behaviour correct across view types adds up to a substantial amount of bespoke code. react-big-calendar packages this work as a reusable component.

The library targets React developers who need an events calendar similar in appearance and behaviour to Google Calendar or Outlook Calendar. The README describes it as an events calendar component built for React and designed for modern browsers, explicitly excluding Internet Explorer. Its starters list includes a Vite-bundled TypeScript demo, indicating that TypeScript projects are a supported use case.

The Localizer Requirement and Your Date Library Choice

react-big-calendar does not bundle a date-formatting library. Every project must choose and configure a localizer before the calendar will render. This is a hard requirement: without a localizer, the calendar cannot format dates, parse time zones, or determine the start of the week for a given locale.

Four localizers are available:

Moment.js is the most widely documented in the ecosystem. Import momentLocalizer from react-big-calendar and pass moment to it.

Globalize.js v0.1.1 provides internationalisation through globalizeLocalizer.

date-fns v2 uses dateFnsLocalizer with explicit locale imports. The README example shows importing format, parse, startOfWeek, and getDay from date-fns alongside a locale object.

Day.js uses dayjsLocalizer but requires eight Day.js plugins to be loaded: IsBetween, IsLeapYear, IsSameOrAfter, IsSameOrBefore, LocaleData, LocalizedFormat, MinMax, and UTC. The dayjsLocalizer extends Day.js with these plugins internally.

The choice of localizer affects bundle size because each date library has a different footprint. Teams already using date-fns or Day.js in their project can avoid adding an extra date library. Teams starting fresh often choose date-fns for tree-shaking support.

Installing react-big-calendar and Rendering a First Calendar

Install the package and a date library:

$ git clone [email protected]:bigcalendar/react-big-calendar.git
$ cd react-big-calendar
$ yarn
$ yarn storybook

For production use, add the package directly:

yarn add react-big-calendar

Include the required stylesheet:

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const localizer = momentLocalizer(moment)

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

The container element's CSS height is required. The README states explicitly that without a defined height, the calendar will not be visible. Include the compiled CSS by importing react-big-calendar/lib/css/react-big-calendar.css in the project's stylesheet or entry file.

The events data structure is an array of objects. At minimum, each event must expose the fields named by startAccessor and endAccessor ("start" and "end" by default), which should be JavaScript Date values. Additional fields on event objects can be used in custom event rendering.

Custom Styling, Drag and Drop, and Starters

react-big-calendar ships SASS source files for custom styling. Import the variables file to access colours and sizing tokens:

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

Overriding the SASS variables changes theme colours and spacing across the entire calendar without patching individual CSS selectors. The README warns that changing and overriding styles can cause rendering issues; each change should be tested carefully.

Drag and drop functionality is available as an addon through the dragAndDrop package included in the repository. The addon requires its own stylesheet import as shown above.

Three starter repositories are documented in the README: a basic react-big-calendar starter, a drag-and-drop starter, and a TypeScript and React hooks starter bundled with Vite. These provide a quicker path to a working calendar than configuring the package from scratch.

Limitations and Comparison with FullCalendar

react-big-calendar does not manage event data. It is a pure presentation component: the calling code supplies the events array and handles create, update, and delete operations. Teams that need a calendar with built-in event CRUD will need to build that layer themselves or use a backend-integrated solution.

The library requires a configured localizer. This is not optional and means adding at least one date-formatting library to the dependency tree if one is not already present.

FullCalendar is the most widely cited alternative. It is available for React and other frameworks. The two projects have similar feature sets in terms of views and event display. FullCalendar offers additional features in paid tiers, whereas react-big-calendar is entirely MIT-licensed and free. For teams committed to a free, open-source component with no commercial tiers, react-big-calendar is the more straightforward choice. FullCalendar's advantage is a broader feature set in its premium editions and a larger documentation ecosystem.

The last push to react-big-calendar was on 2026-06-01, matching the v1.20.0 release on the same date.

Localizer Details: date-fns and Day.js

The date-fns localizer requires importing four specific functions and a locale object. The README example imports format, parse, startOfWeek, and getDay from date-fns, and enUS from date-fns/locale/en-US:

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 enUS from 'date-fns/locale/en-US'

const locales = {
  'en-US': enUS,
}

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

This explicit import pattern is compatible with date-fns v2's tree-shaking model. The Day.js localizer is simpler to configure since dayjsLocalizer handles the plugin registration internally, but it requires Day.js to be available in the project.

Maintenance and License

The last push to the repository was on 2026-06-01, matching the v1.20.0 release on the same date. The gap between this release and 2026-09-28 is nearly four months. The previous release, v1.19.6, shipped 2026-05-29. The library has a changelog in CHANGELOG.md, TypeScript type declarations, and a CITATION.cff file for academic citation.

react-big-calendar is licensed under the MIT license. Commercial use, modification, and distribution are permitted. The community Slack channel is listed in the README, and the repository links to Arabic and other translation contributions in docs/.

Editorial conclusion

react-big-calendar suits React teams that need a Google Calendar-style events view with multiple date-formatting library choices and SASS-based custom styling. It is not a fit for projects that require server-side rendering without a configured localizer, or for teams that need a vanilla JS calendar with no React dependency. Before adopting it, confirm which date library (Moment.js, date-fns, Day.js, or Globalize.js) is already in the project, since the localizer choice affects the bundle and the Day.js variant requires additional plugins listed in the README.

Frequently asked questions

Official sources

1. bigcalendar/react-big-calendar on GitHub
2. License: MIT
3. Project website
4. README
5. Releases