Nine Parsecs from Milwaukee

    react-native-calendario
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.2 • Public • Published

    React Native Calendar 📆

    Coverlogo

    BuildStatus NPM version npm CodeFactor Codacy Badge

    Installation

    npm install react-native-calendario --save

    Using yarn

    yarn add react-native-calendario

    Usage

    import { Calendar } from 'react-native-calendario';
    <Calendar
      onChange={(range) => console.log(range)}
      minDate={new Date(2018, 3, 20)}
      startDate={new Date(2018, 3, 30)}
      endDate={new Date(2018, 4, 5)}
      theme={{
        activeDayColor: {},
        monthTitleTextStyle: {
          color: '#6d95da',
          fontWeight: '300',
          fontSize: 16,
        },
        emptyMonthContainerStyle: {},
        emptyMonthTextStyle: {
          fontWeight: '200',
        },
        weekColumnsContainerStyle: {},
        weekColumnStyle: {
          paddingVertical: 10,
        },
        weekColumnTextStyle: {
          color: '#b6c1cd',
          fontSize: 13,
        },
        nonTouchableDayContainerStyle: {},
        nonTouchableDayTextStyle: {},
        startDateContainerStyle: {},
        endDateContainerStyle: {},
        dayContainerStyle: {},
        dayTextStyle: {
          color: '#2d4150',
          fontWeight: '200',
          fontSize: 15,
        },
        dayOutOfRangeContainerStyle: {},
        dayOutOfRangeTextStyle: {},
        todayContainerStyle: {},
        todayTextStyle: {
          color: '#6d95da',
        },
        activeDayContainerStyle: {
          backgroundColor: '#6d95da',
        },
        activeDayTextStyle: {
          color: 'white',
        },
        nonTouchableLastMonthDayTextStyle: {},
      }}
    />

    API

    Prop Description Required? Default Type
    onChange (deprecated) Callback called when a day is pressed. no Function
    onPress Callback called when a day is pressed. yes (Date) => void
    minDate Minimum date that can be selected. no null Date
    maxDate Maximum date that can be selected. no null Date
    startDate Selected start date no null Date
    endDate Selected end date requires startDate null Date
    theme Calendar StyleSheet no null ThemeType
    locale Calendar language es, en, fr, br 'en' LocaleType
    dayNames Array of day names no [] string[]
    monthNames Array of names of each mo no [] string[]
    showWeekdays Show Week columns no true boolean
    showMonthTitle Show Month title no true boolean
    initialListSize FlatList initialNumToRender no 2 number
    startingMonth First month to render no current month 'YYYY-MM-DD'
    numberOfMonths Number of months to render no 12 number
    disableRange Turn off range date selection no false boolean
    firstDayMonday Monday as first day of the week no false boolean
    monthHeight Change Month row height no 370 number
    markedDays Multi-dot support on Day component no undefined MarkedDays
    disabledDays Disabled days no null {[string]: any }
    renderDayContent Render custom Day content no null Function
    renderAllMonths Use this for web, render all months no null boolean
    viewableItemsChanged handleViewableItemsChange callback no null Function
    disableOffsetDays Remove offset Days. no false boolean

    License

    MIT

    Install

    npm i react-native-calendario

    DownloadsWeekly Downloads

    447

    Version

    3.2.2

    License

    MIT

    Unpacked Size

    173 kB

    Total Files

    67

    Last publish

    Collaborators

    • maggialejandro