react-native-calendar-picker

Calendar Picker Component for React Native

This is a Calendar Picker Component for React Native

To use the calendar you just need to:

npm install react-native-calendar-picker

How to use it:

import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  View
} from 'react-native';

var CalendarPicker = require('react-native-calendar-picker'),
    CalendarPicker2;

CalendarPicker2 = React.createClass({
  getInitialState: function() {
    return {
      date: new Date(),
    };
  },

  onDateChange: function(date) {
    this.setState({ date: date });
  },

  render: function() {
    return (
      <View style={styles.container}>

        <CalendarPicker 
          selectedDate={this.state.date}
          onDateChange={this.onDateChange}
          screenWidth={Dimensions.get('window')}
          selectedBackgroundColor={'#5ce600'} />

        <Text style={styles.selectedDate}> Date: { this.state.date.toString() } </Text>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
  },
  selectedDate: {
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#000',
  }
});

CalendarPicker props

| Prop | Type | Description | :------------ |:---------------:| :-----| | weekdays | array | List of week days. Eg. ['Mo', 'Tue', ...] Must be 7 days | | months | array | List of months names. | | startFromMonday | boolean | Default first day of week will be Sunday. You can set start of week from Monday. | | previousTitle | string | Title of button for previous month. | | nextTitle | string | Title of button for next month. | | selectedDayColor | string | Color for selected day | | scaleFactor | float | Optional. Default scales to window width | | changeDateOnCalendarMovement | bool | Optional. Defaults to true, thus changing the year or month will also change the selcted date. Set to false if you don't want that. | | overrideStyles | object | Optional. With this you can override all default styles present in makeStyles.js. This uses lodash to merge the override styles onto the default styles. |

To Do:

• Add swipe gestures
• Add ability to select date range

Suggestions?

Drop an email to [email protected]

Open issues

Submit PRs.

Special thanks

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

@edvinerikson @thomaswright @brentvatne @kesha-antonov @jthestupidkid @adamkrell @joshuapinter