Skip to content
gcal/outlook like calendar component
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead, 82 commits behind intljusticemission:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.storybook
examples
src
stories
test
webpack
.babelrc
.eslintrc
.gitattributes
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json
yarn.lock

README.md

react-big-calendar

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

DEMO and Docs

Inspired by Full Calendar.

Use and Setup

npm install react-big-calendar --save

Include react-big-calendar/lib/css/react-big-calendar.css for styles, and make sure your calendar's container element has a height, or the calendar won't be visible.

Starters

Run examples locally

$ git clone git@github.com:intljusticemission/react-big-calendar.git
$ cd react-big-calendar
$ npm install
$ npm run examples

Localization and Date Formatting

react-big-calendar includes two options for handling the date formatting and culture localization, depending on your preference of DateTime libraries. You can use either the Moment.js or Globalize.js localizers.

Regardless of your choice, you must choose a localizer to use this library:

Moment.js

import BigCalendar from 'react-big-calendar'
import moment from 'moment'

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment))

Globalize.js v0.1.1

import BigCalendar from 'react-big-calendar'
import globalize from 'globalize'

BigCalendar.setLocalizer(BigCalendar.globalizeLocalizer(globalize))

Join us on Reactiflux Discord

Join us on Reactiflux Discord community under the channel #react-big-calendar if you have any questions.

You can’t perform that action at this time.