react-native-calendar-picker
This is a Calendar Picker Component for React Native
To use the calendar you just need to:
npm install --save react-native-calendar-picker
Note: react-native-calendar-picker v5 is a complete re-write of the calendar. This calendar is now written using ES6 syntax. I kept most of the same functionalities and added support for date ranges.
If you need the old code I saved it on a branch v4
How to use it
;;; { superprops; thisstate = selectedStartDate: null ; thisonDateChange = thisonDateChange; } { this; } { const selectedStartDate = thisstate; const startDate = selectedStartDate ? selectedStartDate : ''; return <View style=stylescontainer> <CalendarPicker onDateChange=thisonDateChange /> <View> <Text>SELECTED DATE: startDate </Text> </View> </View> ; } const styles = StyleSheet;
CalendarPicker Props
Prop | Type | Description |
---|---|---|
weekdays |
Array |
Optional. List of week days. Eg. ['Mon', 'Tue', ...] Must be 7 days |
months |
Array |
Optional. List of months names. Eg. ['Jan', 'Feb', ...] Must be 12 months |
startFromMonday |
Boolean |
Optional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is false |
allowRangeSelection |
Boolean |
Optional. Allow to select date ranges. Default is false |
previousTitle |
String |
Optional. Title of button for previous month. Default is Previous |
nextTitle |
String |
Optional. Title of button for next month. Default is Next |
selectedDayColor |
String |
Optional. Color for selected day |
selectedDayTextColor |
String |
Optional. Text color for selected day |
todayBackgroundColor |
String |
Optional. Background color for today. Default is #cccccc |
textStyle |
Object |
Optional. Style overall text. Change fontFamily, color, etc. |
scaleFactor |
Number |
Optional. Default (375) scales to window width |
minDate |
Date |
Optional. Specifies minimum date to be selected |
maxDate |
Date |
Optional. Specifies maximum date to be selected |
initialDate |
Date |
Optional. Date that calendar opens to. Defaults to today. |
width |
Number |
Optional. Width of CalendarPicker's container. Defaults to Dimensions width. |
height |
Number |
Optional. Height of CalendarPicker's container. Defaults to Dimensions height. |
onDateChange |
Function |
Optional. Callback when a date is selected. Returns date as first parameter. |
onMonthChange |
Function |
Optional. Callback when Previous / Next month is pressed. Returns date as first parameter. |
Styles
Some styles will overwrite some won't. For instance:
- If you provide textStyle with fontFamily and color, out of ranges dates will not apply your color, just fontFamily.
Order of precedence:
- defaultColor => textStyle => selectedDayColor
- defaultTodayBackgroundColor => todayBackgroundColor
- defaultBackgroundColor => selectedDayColor
- defaultTextStyles => textStyle => selectedDayTextColor
More Examples
Start from Monday, allowRangeSelection, Min and Max Dates and Styles Changes Example
;;; { superprops; thisstate = selectedStartDate: null selectedEndDate: null ; thisonDateChange = thisonDateChange; } { if type === 'END_DATE' this; else this; } { const selectedStartDate selectedEndDate = thisstate; const minDate = ; // Today const maxDate = 2017 6 3; const startDate = selectedStartDate ? selectedStartDate : ''; const endDate = selectedEndDate ? selectedEndDate : ''; return <View style=stylescontainer> <CalendarPicker startFromMonday=true allowRangeSelection=true minDate=minDate maxDate=maxDate todayBackgroundColor="#f2e6ff" selectedDayColor="#7300e6" selectedDayTextColor="#FFFFFF" onDateChange=thisonDateChange /> <View> <Text>SELECTED START DATE: startDate </Text> <Text>SELECTED END DATE: endDate </Text> </View> </View> ; } const styles = StyleSheet;
Complex Example, Changing Fonts and Colors, Language and etc...
;;; { superprops; thisstate = selectedStartDate: null selectedEndDate: null ; thisonDateChange = thisonDateChange; } { if type === 'END_DATE' this; else this; } { const selectedStartDate selectedEndDate = thisstate; const minDate = ; // Today const maxDate = 2017 6 3; const startDate = selectedStartDate ? selectedStartDate : ''; const endDate = selectedEndDate ? selectedEndDate : ''; return <View style=stylescontainer> <CalendarPicker startFromMonday=true allowRangeSelection=true minDate=minDate maxDate=maxDate weekdays='Seg' 'Ter' 'Qua' 'Qui' 'Sex' 'Sab' 'Dom' months='Janeiro' 'Fevereiro' 'Março' 'Abril' 'Maio' 'Junho' 'Julho' 'Agosto' 'Setembro' 'Outubro' 'Novembro' 'Dezembro' previousTitle="Anterior" nextTitle="Próximo" todayBackgroundColor="#e6ffe6" selectedDayColor="#66ff33" selectedDayTextColor="#000000" scaleFactor=375 textStyle= fontFamily: 'Cochin' color: '#000000' onDateChange=thisonDateChange /> <View> <Text>SELECTED START DATE: startDate </Text> <Text>SELECTED END DATE: endDate </Text> </View> </View> ; } const styles = StyleSheet;
Suggestions?
Open Issues. Submit PRs.
Special Thanks
I would like to call out some contributors who have been helping with this project
Development
git clone git@github.com:stephy/CalendarPicker.git CalendarPickernpm install
In Package.json modify
"main": "./CalendarPicker",
to
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
Running on device
npm start
Running on iOS Simulator
npm run ios