React Native Calendar 📆

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
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
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
extraData
FlatList extraData
no
null
any
viewableItemsChanged
handleViewableItemsChange callback
no
null
Function
disableOffsetDays
Remove offset Days.
no
false
boolean
License
MIT

.github

Last updated 1 month ago

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
`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
`extraData`	FlatList extraData	no	null	any
`viewableItemsChanged`	handleViewableItemsChange callback	no	null	Function
`disableOffsetDays`	Remove offset Days.	no	false	boolean