react-native-calendar's Introduction

react-native-calendar

Calendar component for ReactNative. It is stateless component.

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)} />
        );
    }
}

Recommend Projects