​​​​
​​​ ​
​ ​
​ ​
​ ​
​​
​
​
npm install react-native-calendario --save
Using yarn
yarn add react-native-calendario
import { Calendar } from 'react-native-calendario';
<CalendaronChange={(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: {},}}/>
Prop | Description | Required? | Default | Type |
| Callback called when a day is pressed. | yes | ​ | Function |
| Minimum date that can be selected. | no | null | Date |
| Maximum date that can be selected. | no | null | Date |
| Selected start date | no | null | Date |
| Selected end date | requires startDate | null | Date |
| Calendar StyleSheet | no | null | ThemeType |
| Calendar language | es, en, fr, br | 'en' | LocaleType |
| Show Week columns | no | true | boolean |
| Show Month title | no | true | boolean |
| FlatList initialNumToRender | no | 2 | number |
| First month to render | no | current month | 'YYYY-MM-DD' |
| Number of months to render | no | 12 | number |
| Turn off range date selection | no | false | boolean |
| Monday as first day of the week | no | false | boolean |
| Change Month row height | no | 370 | number |
| Disabled days | no | null | {[string]: any } |
| Render custom Day content | no | null | Function |
| FlatList extraData | no | null | any |
| handleViewableItemsChange callback | no | null | Function |
| Remove offset Days. | no | false | boolean |
MIT