Hi Guys,

Today,I will learn you how to use calendar in react native. we will show example of calendar in react native. First i'm capable of import stylesheet namespace from react-native-calendars, after i'm capable of make calendar utilizing in react native.

Here, I will give you full example for simply display calendar using react native as bellow.

In the first step Run the following command for create project.

expo init MyWebtutsCalendar

In the step,I will install npm i react-native-paper package.

npm install react-native-calendars --save

I will install yarn add react-native-paper package .

yarn add react-native-calendars

In this step, You will open App.js file and put the code.

import React, { Component } from "react";
import { Text, View,StyleSheet, Button} from 'react-native';
import { Provider ,Appbar} from 'react-native-paper';
import { Calendar } from 'react-native-calendars';

const MyWebtutsComponent = () => {

    const _goBack = () => console.log('Went back');

    const _handleSearch = () => console.log('Searching');

    const _handleMore = () => console.log('Shown more');

    return (
      <Provider>
        <Appbar.Header>
          <Appbar.BackAction onPress={_goBack} />
          <Appbar.Content title="Calendar" />
          <Appbar.Action icon="magnify" onPress={_handleSearch} />
          <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
        </Appbar.Header>
        <View>
            <Calendar
              // Initially visible month. Default = Date()
              current={'2021-10-30'}
              // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
              minDate={'2021-10-30'}
              // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
              maxDate={'2022-10-30'}
              // Handler which gets executed on day press. Default = undefined
              onDayPress={day => {
                console.log('selected day', day);
              }}
              // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
              monthFormat={'yyyy MM'}
              // Handler which gets executed when visible month changes in calendar. Default = undefined
              onMonthChange={month => {
                console.log('month changed', month);
              }}
              // Hide month navigation arrows. Default = false
              hideArrows={true}
              // Do not show days of other months in month page. Default = false
              hideExtraDays={true}
              // If hideArrows=false and hideExtraDays=false do not swich month when tapping on greyed out
              // day from another month that is visible in calendar page. Default = false
              disableMonthChange={true}
              // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
              firstDay={1}
            />
        </View>
    </Provider>
  );
};

export default MyWebtutsComponent;

In the last step run your project using bellow command.

expo start

It will help you...