repository·master·Indexed 27 days ago
https://github.com/bigcalendar/react-big-calendarA flexible events calendar component for React designed for modern browsers using flexbox. It supports various date-time libraries for localization via localizers, including Moment.js, Globalize.js, date-fns, and Day.js. The library includes a withDragAndDrop HOC for moving and resizing events, as well as support for custom component overrides and SASS styling.
Addons are community-contributed and maintained packages that provide additional functionality built on top of the core react-big-calendar library. Currently, the available addon is:
By default, the Date objects provided to the calendar are displayed using the browser's native local timezone and culture.
If you need to display dates and times in a specific timezone other than the user's browser native timezone, you must use a localizer that supports timezone conversions. For best results when performing transformations, it is recommended to store your date/time values in UTC (Zulu) format (YYYY-MM-DDTHH:mm:ssZ).
To run the local examples and Storybook, clone the repository and use yarn.
```sh
$ git clone git@github.com:bigcalendar/react-big-calendar.git
$ cd react-big-calendar
$ yarn
$ yarn storybookAfter running, open http://localhost:3000/examples/index.html to view examples.
To make the calendar visible and correctly styled, you must include the core CSS. You can import the precompiled stylesheet directly into your project:
import 'react-big-calendar/lib/css/react-big-calendar.css';
Additionally, ensure that the container element wrapping your <Calendar /> component has a defined height, otherwise the calendar will not be visible.
To enable drag and drop functionality for moving and resizing events, wrap the standard Calendar component with the withDragAndDrop higher-order component (HOC). You must also import the associated CSS styles.
By default, events are resizable. To disable resizing, set the resizable prop to false on the resulting component. Use the draggableAccessor prop to define which events are eligible for dragging.
import { Calendar } from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'
const DnDCalendar = withDragAndDrop(Calendar)
/* ... */
return (
<DnDCalendar
localizer={myLocalizer}
events={events}
draggableAccessor={event => true}
/>
)react-big-calendar. The library supports four different DateTime libraries: Moment.js, Globalize.js, date-fns, and Day.js. Each requires a specific localizer function imported from react-big-calendar.While you can use the pre-compiled CSS files for standard styling, you can use the included SASS files to customize the calendar's appearance (colors, sizing, etc.) to match your application.
To implement this, import the SASS files directly into your project. If you are using the Drag and Drop addon, ensure you also import its specific styles.
Warning: Overriding styles can cause rendering issues. Carefully test your application after making changes.
@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnDBecause native JavaScript Date objects do not support time zone switching, you can use moment-timezone as a localizer to display events in a specific IANA time zone.
To implement this:
moment and moment-timezone.moment.tz.setDefault('IANA_TIME_ZONE') to set the target time zone for all dates.momentLocalizer with the moment object.Important Considerations:
moment.tz.setDefault() affects all dates created by moment globally from that point forward. It is recommended to reset the default timezone when your component unmounts to avoid side effects.localizer prop and any date-based props (such as min, max, or getNow) simultaneously to ensure consistency.luxonLocalizer or dayjsLocalizer.import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import 'moment-timezone'
// Set the IANA time zone you want to use
moment.tz.setDefault('Europe/Paris')
// Setup the localizer by providing the moment Object
const localizer = momentLocalizer(moment)
const MyCalendar = (props) => (
<div className="myCustomHeight">
<Calendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
/>
</div>
)You can install Big Calendar using npm or yarn. Note that this package requires Node version 18 or higher.
yarn add react-big-calendar
# or
npm install --save react-big-calendarInstall the package using npm or yarn:
yarn add react-big-calendar
# or
npm install --save react-big-calendarImportant: You must include the CSS file for the calendar to render correctly:
import 'react-big-calendar/lib/css/react-big-calendar.css';
Additionally, ensure the container element of your calendar has a defined height, otherwise the calendar will not be visible.
The localizer prop is a required property for react-big-calendar implementations. It is responsible for two primary functions:
When you provide a localizer, it creates an instance of a DateLocalizer class which provides a normalized set of functions for date manipulation. Most components in the library receive this localizer as a prop, allowing your own custom override components to access the same date logic.