👆 react-native-calendar-range-picker

A Simple react native calendar picker using Hooks.

Install

yarn add react-native-calendar-range-picker

or

npm install react-native-calendar-range-picker --save

Usage

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.
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',
    selectedDayTextColor: '#Hex',
    selectedDayBackgroundColor: '#Hex',
    selectedBetweenDayTextColor: '#Hex',
    selectedBetweenDayBackgroundTextColor: '#Hex',
  }}
  ...
/>;

License

MIT