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