Gcal/Outlook Like Calendar Component – React Big Calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-caption approach.

Installation:

# Yarn
$ yarn add react-big-calendar

# NPM
$ npm i react-big-calendar

How to use it:

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>
)

Preview:

Download Details:

Author: jquense

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/jquense/react-big-calendar

License: MIT