Notorious Public Menace

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    @breeffy/react-native-calendar
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.1 • Public • Published

    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

    Feature Status Description
    Gregorian calendar ✔️ Supports gregorian calendar
    Horizontal calendar 🚧 Horizontal calendar, allows scrolling months horizontally
    Vertical calendar Vertical calendar, allows scrolling months vertically
    Infinite calendar 🚧 Allows rendering / scrolling practically infinite amount of months. You can show more than 12000 months
    Selection mode ✔️ Supports singleDay (can select only one day in calendar) or multipleDays (can select multiple days in calendar)
    Pagination mode ✔️ Supports pagination mode
    Themes ✔️ Supports custom themes to customize calendar appearance
    Dark mode ✔️ Supports dark mode by using CalendarThemeDark theme
    Blank-free scrolling 🚧 If scrolling is happening faster than calendar can render months, it will replace them with month-year text
    Gestures ✔️ Supports gestures / swipes to scroll calendar
    Animations ✔️ Supports high-performant native animations based on scroll position

    ✔️ - done 🚧 - in progress - 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.

    Install

    npm i @breeffy/react-native-calendar

    DownloadsWeekly Downloads

    67

    Version

    0.4.1

    License

    Apache-2.0

    Unpacked Size

    495 kB

    Total Files

    285

    Last publish

    Collaborators

    • victor.malov