# @breeffy/react-native-calendar > High-quality, modern, fast interactive calendar built specifically with performance in mind. Supports gestures and animations. Latest version **0.4.1** (published 2021-04-08) · Apache-2.0 license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @breeffy/react-native-calendar pnpm add @breeffy/react-native-calendar yarn add @breeffy/react-native-calendar bun add @breeffy/react-native-calendar ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 0.4.1 | | Published | 2021-04-08 | | First published | 2021-02-25 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 483.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 181 | | Author | Victor Malov | | Maintainers | victor.malov | | Keywords | react-native, ios, android, breeffy, calendar, reanimated | ## Links - npm: https://www.npmjs.com/package/@breeffy/react-native-calendar - Repository: https://github.com/breeffy/react-native-calendar - Homepage: https://github.com/breeffy/react-native-calendar#readme - Issues: https://github.com/breeffy/react-native-calendar/issues - npm.io page: https://npm.io/package/@breeffy/react-native-calendar ## Dependencies (6) - [luxon](https://npm.io/package/luxon.md) ^1.25.0 - [@types/luxon](https://npm.io/package/@types/luxon.md) ^1.25.0 - [use-memo-one](https://npm.io/package/use-memo-one.md) ^1.1.1 - [recyclerlistview](https://npm.io/package/recyclerlistview.md) 3.0.5-beta.1 - [react-native-redash](https://npm.io/package/react-native-redash.md) ^16.0.6 - [@breeffy/react-native-invariant](https://npm.io/package/@breeffy/react-native-invariant.md) ^1.0.0 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 0.4.1 (latest) — 2021-04-08 - 0.5.0-alpha.3 (alpha) — 2021-09-22 - 0.5.0-alpha.2 — 2021-09-21 - 0.5.0-alpha.1 — 2021-09-19 - 0.4.0 — 2021-04-08 - 0.3.0 — 2021-04-07 - 0.2.0 — 2021-04-06 - 0.1.0 — 2021-04-05 - 0.0.3 — 2021-02-25 ## README # React Native Calendar ![GitHub package.json version](https://img.shields.io/github/package-json/v/breeffy/react-native-calendar?color=blue&style=flat-square) ![npm](https://img.shields.io/npm/v/@breeffy/react-native-calendar?color=yellow&label=npm%40latest&style=flat-square) [![npm](https://img.shields.io/github/license/breeffy/react-native-calendar?color=green&style=flat-square)](https://github.com/breeffy/react-native-calendar/blob/main/LICENSE) [![npm](https://img.shields.io/badge/types-Typescript-blue?style=flat-square)](https://www.npmjs.com/package/@gorhom/bottom-sheet) ## Overview High-quality, modern, fast interactive calendar built specifically with performance in mind. Supports gestures and animations. ![React Native Calendar](./preview.gif) ## Main Features | Feature | Status | Description | | ------------------------ | :----------------: | ------------------------------------------------------------------------------------------------------------------- | | **Gregorian** calendar | :heavy_check_mark: | Supports gregorian calendar | | **Horizontal** calendar | :construction: | Horizontal calendar, allows scrolling months horizontally | | **Vertical** calendar | :x: | Vertical calendar, allows scrolling months vertically | | **Infinite** calendar | :construction: | Allows rendering / scrolling practically infinite amount of months. You can show more than **12000 months** | | **Selection** mode | :heavy_check_mark: | Supports `singleDay` (can select only one day in calendar) or `multipleDays` (can select multiple days in calendar) | | **Pagination** mode | :heavy_check_mark: | Supports pagination mode | | **Themes** | :heavy_check_mark: | Supports custom themes to customize calendar appearance | | **Dark mode** | :heavy_check_mark: | Supports dark mode by using `CalendarThemeDark` theme | | **Blank-free** scrolling | :construction: | If scrolling is happening faster than calendar can render months, it will replace them with `month-year` text | | **Gestures** | :heavy_check_mark: | Supports gestures / swipes to scroll calendar | | **Animations** | :heavy_check_mark: | Supports high-performant native animations based on scroll position | :heavy_check_mark: - done :construction: - in progress :x: - not supported ## Supported Versions > React Native ecosystem is evolving rapidly, fixing and introducing many bugs. For example **react-native-calendar** [doesn't work for React Native `0.63.3`](https://github.com/facebook/react-native/issues/30533) because this version doesn't support **ScrollView** `contentOffset` property for Android, while [`0.63.4` should work](https://github.com/facebook/react-native/commit/ed29ba13f97f240c91fdf6c0ef3fb601046697b9). Because of this we provide a table of supported versions. | Calendar | React Native | React Native Reanimated | React Native Gesture Handler | | :------------------------: | :-----------------------: | :-------------------------: | :--------------------------: | | **0.3.0**, **0.4.0**, **0.4.1** | 0.64.0 | 2.1.0 | 1.10.3 | > [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) are **peerDependencies** and need to be installed beforehand. ## Usage ```ts import React from 'react'; import { View } from 'react-native'; import { Calendar } from '@breeffy/react-native-calendar'; export const CalendarSheet = () => { return ( ); }; ``` ## Calendar properties ```ts type CalendarProps = { /** * Initial month to be shown. * If not provided, year and month of current local datetime will be selected. */ initialCalendarYearAndMonth?: CalendarYearAndMonth; /** * Amount of months, before initial year and month, * which will be shown in a calendar. * @defaultValue `50` */ monthsBefore?: number; /** * Amount of months, after initial year and month, * which will be shown in a calendar. * @defaultValue `50` */ monthsAfter?: number; /** * How much days can be selected simultaneously. * @defaultValue `singleDay` */ selectionMode?: 'singleDay' | 'multipleDays'; /** * How much months can be scrolled over. * @defaultValue `multipleMonths` */ scrollMode?: 'oneMonth' | 'multipleMonths' | 'anyOffset'; /** * How quickly the calendar scrolling decelerates after the user lifts their finger. * @defaultValue `normal` */ scrollModeDeceleration?: FlatListProps['decelerationRate']; /** * Active (current) calendar day. * If provided, will be highlighted in active color. */ activeCalendarDay?: CalendarDate; /** * Theme object to customize calendar appearance */ theme?: CalendarTheme; /** * Properties to customize performance characteristics */ performanceProps?: CalendarPerformanceProps; /** * Callback is called when state of a day changes, * i.e. it's selected / unselected. * * **Note:** for `singleDay` selection mode day unselected by * other selected day is not notified. * You can understand it was unselected by checking * current `selectionMode`. */ onDayStateChange?: (day: CalendarDate, kind: CalendarDayKind) => void; /** * Container style */ style?: StyleProp; }; ``` Copyright © 2020-2021, [Victor Malov](https://github.com/likern). --- _Source: https://npm.io/package/@breeffy/react-native-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._