Narcissistic Pickle Meister
    Wondering what’s next for npm?Check out our public roadmap! »

    react-native-calendar-picker
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-calendar-picker package

    7.1.2 • Public • Published

    react-native-calendar-picker

    npm version npm Build Status

    This is a Calendar Picker Component for React Native

    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.

    alt tag

    To use the calendar you just need to:

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

    Prerequisites

    CalendarPicker requires Moment JS >=2.0. Date props may be anything parseable by Moment: Javascript Date, Moment date, or ISO8601 datetime string.

    npm install --save moment
    

    Example

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View
    } from 'react-native';
    import CalendarPicker from 'react-native-calendar-picker';
    
    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          selectedStartDate: null,
        };
        this.onDateChange = this.onDateChange.bind(this);
      }
    
      onDateChange(date) {
        this.setState({
          selectedStartDate: date,
        });
      }
      render() {
        const { selectedStartDate } = this.state;
        const startDate = selectedStartDate ? selectedStartDate.toString() : '';
        return (
          <View style={styles.container}>
            <CalendarPicker
              onDateChange={this.onDateChange}
            />
    
            <View>
              <Text>SELECTED DATE:{ startDate }</Text>
            </View>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        marginTop: 100,
      },
    });

    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 Moment 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: Moment-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: Moment-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: Moment-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
    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 Moment date as first param; START_DATE or END_DATE as second param.
    onMonthChange Function Optional. Callback when Previous / Next month is pressed. Returns Moment 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.

    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

    alt tag

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View
    } from 'react-native';
    import CalendarPicker from 'react-native-calendar-picker';
    
    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          selectedStartDate: null,
          selectedEndDate: null,
        };
        this.onDateChange = this.onDateChange.bind(this);
      }
    
      onDateChange(date, type) {
        if (type === 'END_DATE') {
          this.setState({
            selectedEndDate: date,
          });
        } else {
          this.setState({
            selectedStartDate: date,
            selectedEndDate: null,
          });
        }
      }
    
      render() {
        const { selectedStartDate, selectedEndDate } = this.state;
        const minDate = new Date(); // Today
        const maxDate = new Date(2017, 6, 3);
        const startDate  =  selectedStartDate ? selectedStartDate.toString() : '';
        const endDate = selectedEndDate ? selectedEndDate.toString() : '';
    
        return (
          <View style={styles.container}>
            <CalendarPicker
              startFromMonday={true}
              allowRangeSelection={true}
              minDate={minDate}
              maxDate={maxDate}
              todayBackgroundColor="#f2e6ff"
              selectedDayColor="#7300e6"
              selectedDayTextColor="#FFFFFF"
              onDateChange={this.onDateChange}
            />
    
            <View>
              <Text>SELECTED START DATE:{ startDate }</Text>
              <Text>SELECTED END DATE:{ endDate }</Text>
            </View>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        marginTop: 100,
      },
    });

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

    alt tag

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View
    } from 'react-native';
    import CalendarPicker from 'react-native-calendar-picker';
    
    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          selectedStartDate: null,
          selectedEndDate: null,
        };
        this.onDateChange = this.onDateChange.bind(this);
      }
    
      onDateChange(date, type) {
        if (type === 'END_DATE') {
          this.setState({
            selectedEndDate: date,
          });
        } else {
          this.setState({
            selectedStartDate: date,
            selectedEndDate: null,
          });
        }
      }
    
      render() {
        const { selectedStartDate, selectedEndDate } = this.state;
        const minDate = new Date(); // Today
        const maxDate = new Date(2017, 6, 3);
        const startDate  =  selectedStartDate ? selectedStartDate.toString() : '';
        const endDate = selectedEndDate ? selectedEndDate.toString() : '';
    
        return (
          <View style={styles.container}>
            <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={this.onDateChange}
            />
    
            <View>
              <Text>SELECTED START DATE:{ startDate }</Text>
              <Text>SELECTED END DATE:{ endDate }</Text>
            </View>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        marginTop: 100,
      },
    });

    Custom styling individual dates

    alt tag

    let today = moment();
    let day = today.clone().startOf('month');
    let customDatesStyles = [];
    while(day.add(1, 'day').isSame(today, 'month')) {
      customDatesStyles.push({
        date: day.clone(),
        // Random colors
        style: {backgroundColor: '#'+('#00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)},
        textStyle: {color: 'black'}, // sets the font color
        containerStyle: [], // extra styling for day container
        allowDisabled: true, // allow custom style to apply to disabled dates
      });
    }
    
    render() {
      return (
        <CalendarPicker
          todayTextStyle={{fontWeight: 'bold'}}
          todayBackgroundColor={'transparent'}
          customDatesStyles={customDatesStyles}
          minDate={today}
        />
      );
    }

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

    const customDayHeaderStylesCallback = {dayOfWeek, month, year} => {
      switch(dayOfWeek) { // can also evaluate month, year
        case 4: // Thursday
          return {
            style: {
              borderRadius: 12,
              backgroundColor: 'cyan',
            },
            textStyle: {
              color: 'blue',
              fontSize: 22,
              fontWeight: 'bold',
            }
          };
      }
    }
    
    const customDatesStylesCallback = date => {
      switch(date.isoWeekday()) {
        case 1: // Monday
          return {
            style:{
              backgroundColor: '#909',
            },
            textStyle: {
              color: '#0f0',
              fontWeight: 'bold',
            }
          };
        case 7: // Sunday
          return {
            textStyle: {
              color: 'red',
            }
          };
      }
    }
    
    <CalendarPicker
          customDayHeaderStyles={customDayHeaderStylesCallback}
          customDatesStyles={customDatesStylesCallback}
        />

    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. Moment example for today's day of month: moment().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

    Sample Application

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

    cd example
    npm run cp
    npm install
    npm 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.

    Install

    npm i react-native-calendar-picker

    DownloadsWeekly Downloads

    5,323

    Version

    7.1.2

    License

    MIT

    Unpacked Size

    99.6 kB

    Total Files

    31

    Last publish

    Collaborators

    • avatar
    • avatar