# react-big-calendar-fns

> Calendar! with events (fork for date-fns)

Latest version **0.19.2** (published 2018-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-big-calendar-fns
pnpm add react-big-calendar-fns
yarn add react-big-calendar-fns
bun add react-big-calendar-fns
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.19.2 |
| Published | 2018-06-24 |
| First published | 2018-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 301 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dmitry Ishkov |
| Maintainers | therusskiy |
| Keywords | scheduler, react-component, react, calendar, events, full calendar |

## Links

- npm: https://www.npmjs.com/package/react-big-calendar-fns
- Repository: https://github.com/intljusticemission/react-big-calendar
- Homepage: https://github.com/intljusticemission/react-big-calendar#readme
- Issues: https://github.com/intljusticemission/react-big-calendar/issues
- npm.io page: https://npm.io/package/react-big-calendar-fns

## Dependencies (10)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [warning](https://npm.io/package/warning.md) ^2.0.0
- [invariant](https://npm.io/package/invariant.md) ^2.1.0
- [classnames](https://npm.io/package/classnames.md) ^2.1.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [dom-helpers](https://npm.io/package/dom-helpers.md) ^2.3.0 || ^3.0.0
- [react-overlays](https://npm.io/package/react-overlays.md) ^0.7.0
- [uncontrollable](https://npm.io/package/uncontrollable.md) ^4.0.0
- [date-arithmetic](https://npm.io/package/date-arithmetic.md) ^3.0.0
- [react-prop-types](https://npm.io/package/react-prop-types.md) ^0.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.19.2 (latest) — 2018-06-24
- 0.19.1 — 2018-06-24

## README

# 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**](http://intljusticemission.github.io/react-big-calendar/examples/index.html)

Inspired by [Full Calendar](http://fullcalendar.io/).

## 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

* [react-big-calendar](https://github.com/arecvlohe/rbc-starter)
* [react-big-calendar with drag and drop](https://github.com/arecvlohe/rbc-with-dnd-starter)

## Run examples locally

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

* Open [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html).

### 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](http://momentjs.com/) or [Globalize.js](https://github.com/jquery/globalize) localizers.

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

#### Moment.js

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

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment))
```

#### Globalize.js v0.1.1

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

BigCalendar.setLocalizer(BigCalendar.globalizeLocalizer(globalize))
```

#### Date-fns v2.0.0-alpha7

Complete support will be after date-fns v2 release

```js
import BigCalendar 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'

const locales = {
  'en-US': require('date-fns/locale/en-US'),
  es: require('date-fns/locale/es'),
  // ...
}

BigCalendar.setLocalizer(
  BigCalendar.dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales })
)
```

## Join us on Reactiflux Discord

Join us on [Reactiflux Discord](https://discord.gg/uJsgpkC) community under the channel #react-big-calendar if you have any questions.

---
_Source: https://npm.io/package/react-big-calendar-fns · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._