react-native-calendar-component

    0.1.2 • Public • Published

    react-native-calendar

    Calendar component for ReactNative. It is stateless component.

    example

    install

    npm install --save react-native-calendar-component
    

    props

    prop type default value
    date Date new Date()
    onDateSelect function null
    onPrevButtonPress function null
    onNextButtonPress function null
    dayNames array ["Sun", "Mon" ... ]
    monthNames array ["January", "February" ... ]
    weekFirstDay number 0

    usage

    import React, { Component } from "react";
    import Calendar   from "react-native-calendar-component";
     
    export default class CalendarTest extends Component {
        constructor(props) {
            super(props);
     
            this.state = {
                date: new Date()
            };
        }
     
        handleNextButtonPress() {
            const date = new Date(this.state.date);
            date.setMonth(date.getMonth() + 1);
            this.setState({
                date
            });
        }
     
        handlePrevButtonPress() {
            const date = new Date(this.state.date);
            date.setMonth(date.getMonth() - 1);
            this.setState({
                date
            });
        }
     
        handleDateSelect(date) {
            alert(`clicked: ${this.state.date.toString()}`);
        }
     
        render() {
            return (
                <Calendar
                    date={this.state.date}
                    onPrevButtonPress={() => this.handlePrevButtonPress()}
                    onNextButtonPress={() => this.handleNextButtonPress()}
                    onDateSelect={(date) => this.handleDateSelect(date)} />
            );
        }
    }

    Install

    npm i react-native-calendar-component

    DownloadsWeekly Downloads

    7

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • nikches