genie-react-calendar

React events calendar built on top of react-big-calendar (https://github.com/intljusticemission/react-big-calendar) Inspired by Full Calendar.

Use and Setup

npm install genie-react-calendar --save

Include genie-react-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.

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'

const localizer = BigCalendar.momentLocalizer(moment)

const MyCalendar = props => (
  <div>
    <BigCalendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
    />
  </div>
)

Globalize.js v0.1.1

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

const localizer = BigCalendar.globalizeLocalizer(globalize)

const MyCalendar = props => (
  <div>
    <BigCalendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
    />
  </div>
)

Making changes

To test changes to the calendar in website, build the calendar then copy it into node_modules in website. The easiest way to do this is with a script in the genie-react-calendar folder, something like:

yarn build
cp -rf lib/* ../website/node_modules/genie-react-calendar/lib

If you have yarn watch running in website, it should immediately pick up the changes to node_modules and rebuild.