React Native Calendar Example
Oct 30, 2021 . Admin
![](/upload/blog/react-native-calendar-example-main.png)
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 projectIn the first step Run the following command for create project.
expo init MyWebtutsCalendarStep 2 - Install Package
In the step,I will install npm i react-native-paper package.
npm install react-native-calendars --saveOR
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;Step 3 - Run project
In the last step run your project using bellow command.
expo startOutput
![](/upload/blog/react-native-calendar-example.png)
It will help you...