0.4.1 • Published 3 years ago

@breeffy/react-native-calendar v0.4.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
3 years ago

React Native Calendar

GitHub package.json version npm npm npm

Overview

High-quality, modern, fast interactive calendar built specifically with performance in mind. Supports gestures and animations.

React Native Calendar

Main Features

FeatureStatusDescription
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 because this version doesn't support ScrollView contentOffset property for Android, while 0.63.4 should work.

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 and react-native-gesture-handler are peerDependencies and need to be installed beforehand.

Usage

import React from 'react';
import { View } from 'react-native';
import { Calendar } from '@breeffy/react-native-calendar';

export const CalendarSheet = () => {
  return (
    <Calendar
      selectionMode="singleDay"
      scrollMode="oneMonth"
      monthsBefore={12}
      monthsAfter={24}
    />
  );
};

Calendar properties

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<any>['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<ViewStyle>;
};

Copyright © 2020-2021, Victor Malov.