React Native Calendar Example

Oct 30, 2021 . Admin

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

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 (
          <Appbar.BackAction onPress={_goBack} />
          <Appbar.Content title="Calendar" />
          <Appbar.Action icon="magnify" onPress={_handleSearch} />
          <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
              // Initially visible month. Default = Date()
              // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
              // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
              // Handler which gets executed on day press. Default = undefined
              onDayPress={day => {
                console.log('selected day', day);
              // Month format in calendar title. Formatting values:
              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
              // Do not show days of other months in month page. Default = false
              // 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
              // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.

export default MyWebtutsComponent;
Step 3 - Run project

In the last step run your project using bellow command.

expo start

It will help you...

#React Native