React Native Calendar 📆

Search…
Coverlogo
​​
​ ​
​ ​
​ ​
​ ​
​​
​
 
​
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
License
MIT
.github
Last modified 10mo ago
Copy link
Outline