React Native Calendar 📆

Search…
Could not load image
Coverlogo
​​
​ ​
​ ​
​ ​
​ ​
​​
​
 
​
Installation
1
npm install react-native-calendario --save
Copied!
Using yarn
1
yarn add react-native-calendario
Copied!
Usage
1
import { Calendar } from 'react-native-calendario';
Copied!
1
<Calendar
2
  onChange={(range) => console.log(range)}
3
  minDate={new Date(2018, 3, 20)}
4
  startDate={new Date(2018, 3, 30)}
5
  endDate={new Date(2018, 4, 5)}
6
  theme={{
7
    activeDayColor: {},
8
    monthTitleTextStyle: {
9
      color: '#6d95da',
10
      fontWeight: '300',
11
      fontSize: 16,
12
    },
13
    emptyMonthContainerStyle: {},
14
    emptyMonthTextStyle: {
15
      fontWeight: '200',
16
    },
17
    weekColumnsContainerStyle: {},
18
    weekColumnStyle: {
19
      paddingVertical: 10,
20
    },
21
    weekColumnTextStyle: {
22
      color: '#b6c1cd',
23
      fontSize: 13,
24
    },
25
    nonTouchableDayContainerStyle: {},
26
    nonTouchableDayTextStyle: {},
27
    startDateContainerStyle: {},
28
    endDateContainerStyle: {},
29
    dayContainerStyle: {},
30
    dayTextStyle: {
31
      color: '#2d4150',
32
      fontWeight: '200',
33
      fontSize: 15,
34
    },
35
    dayOutOfRangeContainerStyle: {},
36
    dayOutOfRangeTextStyle: {},
37
    todayContainerStyle: {},
38
    todayTextStyle: {
39
      color: '#6d95da',
40
    },
41
    activeDayContainerStyle: {
42
      backgroundColor: '#6d95da',
43
    },
44
    activeDayTextStyle: {
45
      color: 'white',
46
    },
47
    nonTouchableLastMonthDayTextStyle: {},
48
  }}
49
/>
Copied!
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
.github
Last modified 3mo ago
Copy link
Contents