React Native Calendar Example


Share:
Published By: Admin, Published On: Oct 30, 2021, Category: React Native

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.

Step 1 - Create project

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

expo init MyWebtutsCalendar
Step 2 - Install Package

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

npm install react-native-calendars --save
OR

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

yarn add react-native-calendars
Step 3 - App.js

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;
Step 3 - Run project

In the last step run your project using bellow command.

expo start
Output

It will help you...

Share: