react-native-calendar-picker

This is a Calendar Picker Component for React Native

Breaking changes in 8.x - replaced moment with date-fns

We've migrated away from moment.js, in favor of date-fns, a modular and lightweight alternative. Users wanting to continue to use Moment should stick with 7.x

Prerequisites

CalendarPicker requires date-fns >=3.0. Date props may be anything parseable by the Javascript Date object, such as a Javascript Date, or ISO8601 datetime string.

npm install --save date-fns

Scrollable CalendarPicker — New in 7.x

The scrollable prop was introduced in 7.0.0 and features a bi-directional infinite scroller. It recycles months using RecyclerListView, shifting them as the ends are reached. If the Chrome debugger is used during development, month shifting may be erratic due to a RN setTimeout bug. To prevent month shifts at the ends of the scroller, set restrictMonthNavigation, minDate, and maxDate range to 5 years or less.

To use the calendar you just need to:

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

Example

1import React, { Component } from "react";
2import { StyleSheet, Text, View } from "react-native";
3import CalendarPicker from "react-native-calendar-picker";
4
5export default class App extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      selectedStartDate: null,
10    };
11    this.onDateChange = this.onDateChange.bind(this);
12  }
13
14  onDateChange(date) {
15    this.setState({
16      selectedStartDate: date,
17    });
18  }
19  render() {
20    const { selectedStartDate } = this.state;
21    const startDate = selectedStartDate ? selectedStartDate.toString() : "";
22    return (
23      <View style={styles.container}>
24        <CalendarPicker onDateChange={this.onDateChange} />
25
26        <View>
27          <Text>SELECTED DATE:{startDate}</Text>
28        </View>
29      </View>
30    );
31  }
32}
33
34const styles = StyleSheet.create({
35  container: {
36    flex: 1,
37    backgroundColor: "#FFFFFF",
38    marginTop: 100,
39  },
40});

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
firstDay	Number	Optional. Default first day of week will be Sunday. You can set start of week with number from 0 to 6. Default is 0 or Sunday
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
showDayStragglers	Boolean	Optional. Populate previous & next month days in empty slots. Default is false
allowRangeSelection	Boolean	Optional. Allow to select date ranges. Default is false
allowBackwardRangeSelect	Boolean	Optional. Allow selecting range in reverse. 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
previousTitleStyle	TextStyle	Optional. Text styling for Previous text.
nextTitleStyle	TextStyle	Optional. Text styling for Next text.
previousComponent	Object	Optional. Component to use in Previous button. Overrides previousTitle & previousTitleStyle.
nextComponent	Object	Optional. Component to use in Next button. Overrides nextTitle & nextTitleStyle.
selectedDayColor	String	Optional. Color for selected day
selectedDayStyle	ViewStyle	Optional. Style for selected day. May override selectedDayColor.
selectedDayTextColor	String	Optional. Text color for selected day
selectedDayTextStyle	Object	Optional. Text style for selected day (including all days in range)
selectedRangeStartTextStyle	Object	Optional. Text style for start day of range
selectedRangeEndTextStyle	Object	Optional. Text style for end day of range
selectedRangeStartStyle	ViewStyle	Optional. Container style for start day of range.
selectedRangeEndStyle	ViewStyle	Optional. Container style for end day of range.
selectedRangeStyle	ViewStyle	Optional. Container style for all days in range selection.
selectedDisabledDatesTextStyle	Object	Optional. Text style for ineligible dates during range selection.
disabledDates	Array or Function	Optional. Specifies dates that cannot be selected. Array of Dates, or a function that returns true for a given date (apologies for the inverted logic).
disabledDatesTextStyle	TextStyle	Optional. Text styling for disabled dates.
selectedStartDate	Date	Optional. Specifies a selected Start Date.
selectedEndDate	Date	Optional. Specifies a selected End Date.
minRangeDuration	Number or Array	Optional. Specifies a minimum range duration when using allowRangeSelection. Can either pass a number to be used for all dates or an Array of objects if the minimum range duration depends on the date {date: parsable date, minDuration: Number}
maxRangeDuration	Number or Array	Optional. Specifies a maximum range duration when using allowRangeSelection. Can either pass a number to be used for all dates or an Array of objects if the maximum range duration depends on the date {date: parsable date, maxDuration: Number}
todayBackgroundColor	String	Optional. Background color for today. Default is #cccccc
todayTextStyle	TextStyle	Optional. Text styling for today.
textStyle	TextStyle	Optional. Style overall text. Change fontFamily, color, etc.
customDatesStyles	Array or Func	Optional. Style individual date(s). Supports an array of objects {date: parseable date, containerStyle: ViewStyle, style: ViewStyle, textStyle: TextStyle, allowDisabled: Boolean}, or a callback which receives a date param and returns {containerStyle: ViewStyle, style: ViewStyle, textStyle: TextStyle, allowDisabled: Boolean} for that date.
customDayHeaderStyles	Func	Optional. Style day of week header (Monday - Sunday). Callback that receives ISO {dayOfWeek, month, year} and should return {style: ViewStyle, textStyle: TextStyle}
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.
scrollable	Boolean	Optional. Months are scrollable if true. Default is false
horizontal	Boolean	Optional. Scroll axis when scrollable set. Default is true
scrollDecelarationRate	Number / "normal" / "fast"	Optional. Determines how quickly the scroll view decelerates after the user lifts their finger. Default is normal
enableDateChange	Boolean	Optional. Whether to enable pressing on day. Default is true
restrictMonthNavigation	Boolean	Optional. Whether to disable Previous month button if it is before minDate or Next month button if it is after MaxDate. Default is false
onDateChange	Function	Optional. Callback when a date is selected. Returns date as first param; START_DATE or END_DATE as second param.
onMonthChange	Function	Optional. Callback when Previous / Next month is pressed. Returns date as first parameter.
dayShape	String	Optional. Shape of the Day component. Default is circle. Available options are circle and square.
headingLevel	Number	Optional. Sets the aria-level for the calendar title heading when on Web. Default is 1.
selectMonthTitle	String	Optional. Title of month selector view. Default is "Select Month in " + {year}.
selectYearTitle	String	Optional. Title of year selector view. Default is "Select Year".
dayLabelsWrapper	ViewStyle	Optional. Style for weekdays wrapper. E.g If you want to remove top and bottom divider line.
enableSwipe	Deprecated	Use scrollable.
swipeConfig	Deprecated	Use scrollable.
onSwipe	Deprecated	Use onMonthChange.
dayOfWeekStyles	Deprecated	Use customDatesStyles & customDayHeaderStyles callbacks to style individual dates, days of week, and/or header.
customDatesStylesPriority	Deprecated	Use customDatesStyles & customDayHeaderStyles callbacks to style individual dates, days of week, and/or header.
monthYearHeaderWrapperStyle	ViewStyle	Optional. Style for header MonthYear title wrapper. E.g If you want to change the order of year and month.
headerWrapperStyle	ViewStyle	Optional. Style for entire header controls wrapper. This contains the previous / next controls plus month & year.
monthTitleStyle	TextStyle	Optional. Text styling for header's month text.
yearTitleStyle	TextStyle	Optional. Text styling for header's year text.
initialView	String	Optional. The view that the calendar opens to. Default is days. Available options are years, months, and days.
fontScaling	Boolean	Optional. To enable fontScaling. Default is true

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

1import React, { Component } from "react";
2import { StyleSheet, Text, View } from "react-native";
3import CalendarPicker from "react-native-calendar-picker";
4
5export default class App extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      selectedStartDate: null,
10      selectedEndDate: null,
11    };
12    this.onDateChange = this.onDateChange.bind(this);
13  }
14
15  onDateChange(date, type) {
16    if (type === "END_DATE") {
17      this.setState({
18        selectedEndDate: date,
19      });
20    } else {
21      this.setState({
22        selectedStartDate: date,
23        selectedEndDate: null,
24      });
25    }
26  }
27
28  render() {
29    const { selectedStartDate, selectedEndDate } = this.state;
30    const minDate = new Date(); // Today
31    const maxDate = new Date(2017, 6, 3);
32    const startDate = selectedStartDate ? selectedStartDate.toString() : "";
33    const endDate = selectedEndDate ? selectedEndDate.toString() : "";
34
35    return (
36      <View style={styles.container}>
37        <CalendarPicker
38          startFromMonday={true}
39          allowRangeSelection={true}
40          minDate={minDate}
41          maxDate={maxDate}
42          todayBackgroundColor="#f2e6ff"
43          selectedDayColor="#7300e6"
44          selectedDayTextColor="#FFFFFF"
45          onDateChange={this.onDateChange}
46        />
47
48        <View>
49          <Text>SELECTED START DATE:{startDate}</Text>
50          <Text>SELECTED END DATE:{endDate}</Text>
51        </View>
52      </View>
53    );
54  }
55}
56
57const styles = StyleSheet.create({
58  container: {
59    flex: 1,
60    backgroundColor: "#FFFFFF",
61    marginTop: 100,
62  },
63});

Complex Example, Changing Fonts and Colors, Language and etc...

1import React, { Component } from "react";
2import { StyleSheet, Text, View } from "react-native";
3import CalendarPicker from "react-native-calendar-picker";
4
5export default class App extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      selectedStartDate: null,
10      selectedEndDate: null,
11    };
12    this.onDateChange = this.onDateChange.bind(this);
13  }
14
15  onDateChange(date, type) {
16    if (type === "END_DATE") {
17      this.setState({
18        selectedEndDate: date,
19      });
20    } else {
21      this.setState({
22        selectedStartDate: date,
23        selectedEndDate: null,
24      });
25    }
26  }
27
28  render() {
29    const { selectedStartDate, selectedEndDate } = this.state;
30    const minDate = new Date(); // Today
31    const maxDate = new Date(2017, 6, 3);
32    const startDate = selectedStartDate ? selectedStartDate.toString() : "";
33    const endDate = selectedEndDate ? selectedEndDate.toString() : "";
34
35    return (
36      <View style={styles.container}>
37        <CalendarPicker
38          startFromMonday={true}
39          allowRangeSelection={true}
40          minDate={minDate}
41          maxDate={maxDate}
42          weekdays={["Seg", "Ter", "Qua", "Qui", "Sex", "Sab", "Dom"]}
43          months={[
44            "Janeiro",
45            "Fevereiro",
46            "Março",
47            "Abril",
48            "Maio",
49            "Junho",
50            "Julho",
51            "Agosto",
52            "Setembro",
53            "Outubro",
54            "Novembro",
55            "Dezembro",
56          ]}
57          previousTitle="Anterior"
58          nextTitle="Próximo"
59          todayBackgroundColor="#e6ffe6"
60          selectedDayColor="#66ff33"
61          selectedDayTextColor="#000000"
62          scaleFactor={375}
63          textStyle={{
64            fontFamily: "Cochin",
65            color: "#000000",
66          }}
67          onDateChange={this.onDateChange}
68        />
69
70        <View>
71          <Text>SELECTED START DATE:{startDate}</Text>
72          <Text>SELECTED END DATE:{endDate}</Text>
73        </View>
74      </View>
75    );
76  }
77}
78
79const styles = StyleSheet.create({
80  container: {
81    flex: 1,
82    backgroundColor: "#FFFFFF",
83    marginTop: 100,
84  },
85});

Custom styling individual dates

1
2let today = new Date();
3let day = today.clone().startOf('month');
4let customDatesStyles = [];
5while(day.add(1, 'day').isSame(today, 'month')) {
6  customDatesStyles.push({
7    date: day.clone(),
8    // Random colors
9    style: {backgroundColor: '#'+('#00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)},
10    textStyle: {color: 'black'}, // sets the font color
11    containerStyle: [], // extra styling for day container
12    allowDisabled: true, // allow custom style to apply to disabled dates
13  });
14}
15
16render() {
17  return (
18    <CalendarPicker
19      todayTextStyle={{fontWeight: 'bold'}}
20      todayBackgroundColor={'transparent'}
21      customDatesStyles={customDatesStyles}
22      minDate={today}
23    />
24  );
25}

Styling each day of the week and the day name header.

1
2const customDayHeaderStylesCallback = {dayOfWeek, month, year} => {
3  switch(dayOfWeek) { // can also evaluate month, year
4    case 4: // Thursday
5      return {
6        style: {
7          borderRadius: 12,
8          backgroundColor: 'cyan',
9        },
10        textStyle: {
11          color: 'blue',
12          fontSize: 22,
13          fontWeight: 'bold',
14        }
15      };
16  }
17}
18
19const customDatesStylesCallback = date => {
20  switch(date.isoWeekday()) {
21    case 1: // Monday
22      return {
23        style:{
24          backgroundColor: '#909',
25        },
26        textStyle: {
27          color: '#0f0',
28          fontWeight: 'bold',
29        }
30      };
31    case 7: // Sunday
32      return {
33        textStyle: {
34          color: 'red',
35        }
36      };
37  }
38}
39
40<CalendarPicker
41      customDayHeaderStyles={customDayHeaderStylesCallback}
42      customDatesStyles={customDatesStylesCallback}
43    />

Methods

These internal methods may be accessed through a ref to the CalendarPicker.

Name	Params	Description
handleOnPressDay	{year, month, day} (Integers)	Programmatically select date. year, month and day are numbers. day is the day of the current month. date-fns example for today's day of month: getDate(new Date())
handleOnPressNext		Programmatically advance to next month.
handleOnPressPrevious		Programmatically advance to previous month.
resetSelections		Clear date selections. Useful for resetting date range selection when user has picked a start date but not an end date.

TypeScript

Definitions are available at https://www.npmjs.com/package/@types/react-native-calendar-picker courtesy of automatensalat.

npm install --save @types/react-native-calendar-picker

Suggestions?

Open Issues. Submit PRs.

Special Thanks

I would like to call out some contributors who have been helping with this project

• peacechen
• edvinerikson
• thomaswright
• brentvatne
• kesha-antonov
• jthestupidkid
• adamkrell
• joshuapinter

Sample Application

The sample app is an Expo project created with create-react-native-app.

1cd example
2npm run cp
3npm install
4npm start

Development

The source files are copied from the project root directory into example using npm run cp. If a source file is modified, it must be copied over again with npm run cp.