\r\n\r\n[**DEMO and Docs**](https://jquense.github.io/react-big-calendar/examples/index.html)\r\n\r\nInspired by [Full Calendar](http://fullcalendar.io/).\r\n\r\n## Use and Setup\r\n\r\n`yarn add react-big-calendar` or `npm install --save react-big-calendar`\r\n\r\nInclude `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container\r\nelement has a height, or the calendar won't be visible. To provide your own custom styling, see the [Custom Styling](#custom-styling) topic.\r\n\r\n## Starters\r\n\r\n- [react-big-calendar](https://github.com/arecvlohe/rbc-starter)\r\n- [react-big-calendar with drag and drop](https://github.com/arecvlohe/rbc-with-dnd-starter)\r\n- [react-big-calendar with TypeScript and React hooks bundled with Vite](https://github.com/christopher-caldwell/react-big-calendar-demo)\r\n\r\n## Run examples locally\r\n\r\n```sh\r\n$ git clone git@github.com:jquense/react-big-calendar.git\r\n$ cd react-big-calendar\r\n$ yarn\r\n$ yarn storybook\r\n```\r\n\r\n- Open [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html).\r\n\r\n### Localization and Date Formatting\r\n\r\n`react-big-calendar` includes four options for handling the date formatting and culture localization, depending\r\non your preference of DateTime libraries. You can use either the [Moment.js](https://momentjs.com/), [Globalize.js](https://github.com/jquery/globalize), [date-fns](https://date-fns.org/), [Day.js](https://day.js.org) localizers.\r\n\r\nRegardless of your choice, you **must** choose a localizer to use this library:\r\n\r\n#### Moment.js\r\n\r\n```js\r\nimport { Calendar, momentLocalizer } from 'react-big-calendar'\r\nimport moment from 'moment'\r\n\r\nconst localizer = momentLocalizer(moment)\r\n\r\nconst MyCalendar = (props) => (\r\n
\r\n \r\n
\r\n)\r\n```\r\n\r\n#### Globalize.js v0.1.1\r\n\r\n```js\r\nimport { Calendar, globalizeLocalizer } from 'react-big-calendar'\r\nimport globalize from 'globalize'\r\n\r\nconst localizer = globalizeLocalizer(globalize)\r\n\r\nconst MyCalendar = (props) => (\r\n
\r\n \r\n
\r\n)\r\n```\r\n\r\n#### date-fns v2\r\n\r\n```js\r\nimport { Calendar, dateFnsLocalizer } from 'react-big-calendar'\r\nimport format from 'date-fns/format'\r\nimport parse from 'date-fns/parse'\r\nimport startOfWeek from 'date-fns/startOfWeek'\r\nimport getDay from 'date-fns/getDay'\r\nimport enUS from 'date-fns/locale/en-US'\r\n\r\nconst locales = {\r\n 'en-US': enUS,\r\n}\r\n\r\nconst localizer = dateFnsLocalizer({\r\n format,\r\n parse,\r\n startOfWeek,\r\n getDay,\r\n locales,\r\n})\r\n\r\nconst MyCalendar = (props) => (\r\n
\r\n \r\n
\r\n)\r\n```\r\n\r\n#### Day.js\r\n\r\nNote that the dayjsLocalizer extends Day.js with the following plugins:\r\n\r\n- [IsBetween](https://day.js.org/docs/en/plugin/is-between)\r\n- [IsSameOrAfter](https://day.js.org/docs/en/plugin/is-same-or-after)\r\n- [IsSameOrBefore](https://day.js.org/docs/en/plugin/is-same-or-before)\r\n- [LocaleData](https://day.js.org/docs/en/plugin/locale-data)\r\n- [LocalizedFormat](https://day.js.org/docs/en/plugin/localized-format)\r\n- [MinMax](https://day.js.org/docs/en/plugin/min-max)\r\n- [UTC](https://day.js.org/docs/en/plugin/utc)\r\n\r\n```js\r\nimport { Calendar, dayjsLocalizer } from 'react-big-calendar'\r\nimport dayjs from 'dayjs'\r\n\r\nconst localizer = dayjsLocalizer(dayjs)\r\n\r\nconst MyCalendar = (props) => (\r\n
\r\n \r\n
\r\n)\r\n```\r\n\r\n## Custom Styling\r\n\r\nOut of the box, you can include the compiled CSS files and be up and running. But, sometimes, you may want to style\r\nBig Calendar to match your application styling. For this reason, SASS files are included with Big Calendar.\r\n\r\n```\r\n @import 'react-big-calendar/lib/sass/styles';\r\n @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD\r\n```\r\n\r\nSASS implementation provides a `variables` file containing color and sizing variables that you can\r\nupdate to fit your application. _Note:_ Changing and/or overriding styles can cause rendering issues with your\r\nBig Calendar. Carefully test each change accordingly.\r\n\r\n## Join The Community\r\n\r\nHelp us improve Big Calendar! Join us on [Slack](https://join.slack.com/t/bigcalendar/shared_invite/zt-1ml1j99af-qIvqOfosMog1W7WxM0~j2Q).\r\n","readmeFilename":"README.md"}
![\"Big](\"./assets/rbc-demo.gif\")
\r\n