Skip to content

maggialejandro/react-native-calendario

Repository files navigation

React Native Calendar πŸ“†

Coverlogo

BuildStatus NPM version npm CodeFactor Codacy Badge PRs Welcome

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