📆
React Native Calendar
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 |
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