An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-caption approach.
# Yarn
$ yarn add react-big-calendar
# NPM
$ npm i react-big-calendar
1. Import the React Big Calendar component and a date formatting library of your choice (like moment.js, Globalize.js, and date-fns).
import BigCalendar from 'react-big-calendar'
import moment from 'moment'
2. Setup the localizer by providing the moment (or globalize) Object to the correct localizer.
const localizer = BigCalendar.momentLocalizer(moment)
3. Create a basic calendar.
const MyCalendar = props => (
<div>
<BigCalendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
/>
</div>
)
Author: jquense
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/jquense/react-big-calendar
License: MIT