Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

React Native Calendar πŸ“†

Coverlogo

Greenkeeper badge

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 Callback called when a day is pressed. yes Function
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
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
disabledDays Disabled days no null {[string]: any }
renderDayContent Render custom Day content no null Function
extraData FlatList extraData no null any
viewableItemsChanged handleViewableItemsChange callback no null Function
disableOffsetDays Remove offset Days. no false boolean

License

MIT

You can’t perform that action at this time.