react-big-calendar

An event calendar component built for React for modern browsers (read: IE10+) and uses Flexbox on classic table-ception methods.

The DEMO and document

The inspiration came from Full Calendar.

Use and Setup

Yarn add react-big-calendar or NPM install –save react-big-calendar

Include styles like react-big-calendar/lib/ CSS /react-big-calendar. CSS, and make sure your calendar’s container elements have a height, otherwise the calendar will not be visible. To provide your own custom styles, see The Custom Styles theme.

starter

  • react-big-calendar
  • React-big-calendar with drag-and-drop
  • Uses Vite bundled TypeScript and React hook’s React-big-calendar

Run the sample locally

$ git clone [email protected]:jquense/react-big-calendar.git
$ 
Copy the code
  • Open the localhost: 3000 / examples/index. HTML.

Localization and date formatting

The React-big-Calendar includes three options for handling date formatting and culture localization, depending on your preference for the DateTime library. You can use moment.js, globalize.js, or date-fns localizers.

Regardless of your choice, you must choose a localizer to use the library.

Moment.js

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>
)
Copy the code

The Globalize. Js v0.1.1

import { Calendar, globalizeLocalizer } from 'react-big-calendar'
import globalize from 'globalize'

const localizer = globalizeLocalizer(globalize)

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

dat-fns v2

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

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

Custom styles

Out of the box, you can include the compiled CSS file and start running it. Sometimes, however, you may want the style of the large calendar to match the style of your application. For this reason, SASS files are included in the Big Calendar.

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

The SASS implementation provides a variables file, which contains color and size variables that you can update according to your application. _ Note: _ Changing and/or overwriting styles may cause rendering problems for your large calendar. Test each change carefully.

Join us on Reactiflux Discord

If you have any questions, join the # Libraries channel in our Reactiflux Discord community.