1.0.5 • Published 3 years ago
react-native-calendar-vaia v1.0.5
:point_up_2: react-native-calendar-range-picker
A Simple react native calendar picker using Hooks.
Install
yarn add react-native-calendar-range-pickeror
npm install react-native-calendar-range-picker --saveUsage
Select date range
import Calendar from "react-native-calendar-range-picker";
<View style={{ flex: 1 }}>
<Calendar
startDate="2020-05-05"
endDate="2020-05-12"
onChange={({ startDate, endDate }) => console.log({ startDate, endDate })}
/>
</View>;Select single date
<View style={{ height: 600 }}>
<Calendar
startDate="2020-05-05"
singleSelectMode
onChange={(date) => console.log(date)}
/>
</View>Props
Common props you may want to specify include:
| Properties | PropType | Description |
|---|---|---|
onChange | func | (Required) Handler which gets executed on day press including date data.(start, end or single date) |
singleSelectMode | boolean | Only select single date. (default = false) |
pastYearRange | number | Amount of months allowed to scroll to the past. (default = 1) |
futureYearRange | number | Amount of months allowed to scroll to the future. (default = 2) |
locale | object | Can be localized by adding custom locales to locale object. |
startDate | string(YYYY-MM-DD) | Initially visible start date. |
endDate | string(YYYY-MM-DD) | Initially visible end date. |
initialNumToRender | number | FlatList initialNumToRender prop.(to protect slow initial render)(default = 7) |
flatListProps | FlatList Props | FlatList all props. |
isMonthFirst | boolean | Switch year and month order. (2021 April -> April 2021) |
disabledBeforeToday | boolean | Disable select day before today. |
style | object | Customize style. |
Locale
const CUSTOM_LOCALE = {
monthNames: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
today: 'Today',
year: '', // letter behind year number -> 2020{year}
}
<Calendar
locale={CUSTOM_LOCALE}
...
/>;Customize Style
<Calendar
style={{
container: {},
monthContainer: {},
weekContainer:{},
monthNameText: {},
dayNameText: {},
dayText: {},
dayTextColor: '#f7f7f7',
holidayColor: 'rgba(0,0,0,0.5)',
todayColor: 'blue',
disabledTextColor: '#Hex',
selectedDayTextColor: '#Hex',
selectedDayBackgroundColor: '#Hex',
selectedBetweenDayTextColor: '#Hex',
selectedBetweenDayBackgroundTextColor: '#Hex',
}}
...
/>;License
MIT