react-native-calendar-box

react-native-calendar-box is calendar picker with box

available in npm react-native-calendar-box

install package from npm

$ npm install --save react-native-calendar-box

link material icons use rnpm

$ rnpm link react-native-vector-icons

example of usage

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, {Component} from 'react';
 import {View, Text, TouchableHighlight, AppRegistry,} from 'react-native';
 import DateTime from 'immutable-datetime';
 import CalendarView from 'react-native-calendar-box';

 type State = {
   selectedMonth: DateTime;
   selectedDate: ?DateTime;
   isCalendarShowUp: boolean;
   isMonthsShowing: boolean;
   isYearsShowing: boolean;
 };

 export default class CalendarDemo extends Component {
   state: State;
   constructor() {
     super(...arguments);
     this.state = {
       selectedMonth: DateTime.now(),
       selectedDate: null,
       isCalendarShowUp: false,
       isMonthsShowing: false,
       isYearsShowing: false,
     };
   }
   render() {
     const calendarProps = {
       selectedMonth: this.state.selectedMonth,
       onNext: this._onNext.bind(this),
       onPrev: this._onPrev.bind(this),
       onDateSelect: this._onDateSelect.bind(this),
       onMonthChange: this._onMontChange.bind(this),
       isMonthsShowing: this.state.isMonthsShowing,
       isYearsShowing: this.state.isYearsShowing,
       onMonthsShow: this._onMonthsShow.bind(this),
       onYearsShow: this._onYearsShow.bind(this),
       onYearChange: this._onYearChange.bind(this),
       yStart: 2010,
       yEnd: 2017,
     };
     if (this.state.isCalendarShowUp) {
       return <CalendarView {...calendarProps}/>;
     }
     return (
       <View style={{marginTop: 50, padding: 10}}>
        <TouchableHighlight onPress={this._showCalendar.bind(this)} style={{height: 40, justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: '#a4e0eb'}}>
          <Text>Clik for select date </Text>
        </TouchableHighlight>
        <Text style={{padding: 10}}>
          Selected Date: {this.state.selectedDate ? this.state.selectedDate.toDateString() : 'no date selected' }
        </Text>
       </View>
     );
   }

   _onNext(date: DateTime): void {
     this.setState({
       selectedMonth: date.addMonths(1),
     });
   }

   _onPrev(date: DateTime): void {
     this.setState({
       selectedMonth: date.addMonths(-1),
     });
   }

   _onDateSelect(date: DateTime): void {
     this.setState({
       selectedDate: date,
       isCalendarShowUp: false,
     });
   }
   _showCalendar(): void {
     this.setState({
       isCalendarShowUp: true,
     });
   }
   _onMonthsShow(value: boolean): void {
     this.setState({
       isMonthsShowing: value,
     });
   }
   _onYearsShow(value: boolean): void {
     this.setState({
       isYearsShowing: value,
     });
   }
   _onMontChange(selected: Object, isShow: boolean): void {
     let diff = selected.value - this.state.selectedMonth.getMonth();
     let newDate = this.state.selectedMonth.addMonths(diff);
     this.setState({
       selectedMonth: newDate,
       isMonthsShowing: isShow,
     });
   }
   _onYearChange(year: Object, isShow: boolean): void {
     let diff = year.value - this.state.selectedMonth.getYear();
     let month = this.state.selectedMonth.getMonth();
     let newYear = this.state.selectedMonth.getYear() + diff;
     let newDate = DateTime.fromDateParts(newYear, month, 1);
     this.setState({
       selectedMonth: newDate,
       isYearsShowing: isShow,
     });
   }
 }

AppRegistry.registerComponent('SandboxRn', () => CalendarDemo);

screen cast

the props

type Props = {
  selectedMonth: ?DateTime;
  onNext: (selectedMonth: DateTime) => void;
  onPrev: (selectedMonth: DateTime) => void;
  onDateSelect: (date: DateTime) => void;
  onMonthChange: (current: Object, isShow: boolean) => void;
  onYearChange: (year: Object, isShow: boolean) => void;
  onMonthsShow: (value: boolean) => void;
  onYearsShow: (value: boolean) => void;
  isMonthsShowing: boolean;
  isYearsShowing: boolean;
  yStart?: number;
  yEnd?: number;
};

future read

since I used immutable-datetime to manage the date, just open those link to find more about API of immutable-datetime