How to Create Calendar App in React Native ?

Last Updated : 23 Jul, 2025

In this article, we will see how to add a Calendar to a React Native App. Discover how to enhance your React Native application by integrating a calendar using the powerful react-native-calendars library. With React Native's ability to facilitate cross-platform mobile app development using JavaScript.

This article describes the process of seamlessly adding a calendar to your app.

How-to-Create--Calendar--App_


To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Prerequisites:

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press "a" as mentioned in the image below.
    • For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app.
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Install Required Dependencies

npm install react-native-calendars

Approach: We will use the react-native-calendars library, a popular choice for adding a customizable calendar component with features like day selection, date marking, and event display in React Native apps.

Example​: In this example, add a calendar component using the `react-native-calendars` library, allowing users to view and select dates with custom styling.

Step 4: Start Coding

- Import libraries: Import required libraries at the top of the file.

JavaScript 
// Import the View component from react-native
import { View } from 'react-native';
// Import the Calendar component from react-native-calendars
import { Calendar } from 'react-native-calendars';


- Calendar: This component is used to show a calendar to users.

JavaScript 
<Calendar
    // Mark specific dates with different styles and properties
    markedDates={{
        '2023-06-25': { selected: true, marked: true }, // Selected and marked date
        '2023-06-24': { marked: true }, // Only marked date
        '2023-06-26': {
            marked: true, // Marked date
            dotColor: 'red', // Dot color for this date
            activeOpacity: 0 // Opacity when pressed
        },
    }}
    // Customize the appearance of the calendar using the theme prop
    theme={{
        backgroundColor: '#ffffff', // Overall background color
        calendarBackground: '#ffffff', // Calendar background color
        textSectionTitleColor: '#b6c1cd', // Color for section titles (weekdays)
        selectedDayBackgroundColor: '#00adf5', // Background color for selected day
        selectedDayTextColor: '#ffffff', // Text color for selected day
        todayTextColor: '#00adf5', // Text color for today's date
        dayTextColor: '#2d4150', // Default day text color
        textDisabledColor: '#d9e1e8', // Color for disabled days
        dotColor: '#00adf5', // Default dot color
        selectedDotColor: '#ffffff', // Dot color for selected day
        arrowColor: '#00adf5', // Color for navigation arrows
        monthTextColor: '#00adf5', // Color for month text
        indicatorColor: 'blue', // Color for loading indicator
        textDayFontFamily: 'monospace', // Font family for day numbers
        textMonthFontFamily: 'monospace', // Font family for month text
        textDayHeaderFontFamily: 'monospace', // Font family for day headers
        textDayFontSize: 16, // Font size for day numbers
        textMonthFontSize: 16, // Font size for month text
        textDayHeaderFontSize: 16 // Font size for day headers
    }}
/>


- MyCalendar: Make a custom functional component and wrap the above calendar component, and return it from MyCalendar.

JavaScript 
// Define a functional component called MyCalendar
const MyCalendar = () => {
    return (
        // Render a View container
        <View>
            {/* Render the Calendar component */}
            <Calendar
                // Mark specific dates with different styles and properties
                markedDates={{
                    '2023-06-25': { selected: true, marked: true }, // Selected and marked date
                    '2023-06-24': { marked: true }, // Only marked date
                    '2023-06-26': {
                        marked: true, // Marked date
                        dotColor: 'red', // Dot color for this date
                        activeOpacity: 0 // Opacity when pressed
                    },
                }}
                // Customize the appearance of the calendar using the theme prop
                theme={{
                    backgroundColor: '#ffffff', // Overall background color
                    calendarBackground: '#ffffff', // Calendar background color
                    textSectionTitleColor: '#b6c1cd', // Color for section titles (weekdays)
                    selectedDayBackgroundColor: '#00adf5', // Background color for selected day
                    selectedDayTextColor: '#ffffff', // Text color for selected day
                    todayTextColor: '#00adf5', // Text color for today's date
                    dayTextColor: '#2d4150', // Default day text color
                    textDisabledColor: '#d9e1e8', // Color for disabled days
                    dotColor: '#00adf5', // Default dot color
                    selectedDotColor: '#ffffff', // Dot color for selected day
                    arrowColor: '#00adf5', // Color for navigation arrows
                    monthTextColor: '#00adf5', // Color for month text
                    indicatorColor: 'blue', // Color for loading indicator
                    textDayFontFamily: 'monospace', // Font family for day numbers
                    textMonthFontFamily: 'monospace', // Font family for month text
                    textDayHeaderFontFamily: 'monospace', // Font family for day headers
                    textDayFontSize: 16, // Font size for day numbers
                    textMonthFontSize: 16, // Font size for month text
                    textDayHeaderFontSize: 16 // Font size for day headers
                }}
            />
        </View>
    );
};


Now, wrap the Mycalendar component with a View component and return from the App component. Also, ensure to export the App.

JavaScript 
// Export the main App component as default
export default function App() {
    return (
        // Render a View container with flex layout and center alignment
        <View style={{ 
            flex: 1, // Take up the full screen
            justifyContent: 'center', // Center content vertically
            alignItems: 'center' // Center content horizontally
        }}>
            {/* Render the custom MyCalendar component */}
            <MyCalendar />
        </View>
    );
}


Complete Source Code

App.js:

App.js 
// Import the View component from react-native
import { View } from 'react-native';
// Import the Calendar component from react-native-calendars
import { Calendar } from 'react-native-calendars';

// Define a functional component called MyCalendar
const MyCalendar = () => {
    return (
        // Render a View container
        <View>
            {/* Render the Calendar component */}
            <Calendar
                // Mark specific dates with different styles and properties
                markedDates={{
                    '2023-06-25': { selected: true, marked: true }, // Selected and marked date
                    '2023-06-24': { marked: true }, // Only marked date
                    '2023-06-26': {
                        marked: true, // Marked date
                        dotColor: 'red', // Dot color for this date
                        activeOpacity: 0 // Opacity when pressed
                    },
                }}
                // Customize the appearance of the calendar using the theme prop
                theme={{
                    backgroundColor: '#ffffff', // Overall background color
                    calendarBackground: '#ffffff', // Calendar background color
                    textSectionTitleColor: '#b6c1cd', // Color for section titles (weekdays)
                    selectedDayBackgroundColor: '#00adf5', // Background color for selected day
                    selectedDayTextColor: '#ffffff', // Text color for selected day
                    todayTextColor: '#00adf5', // Text color for today's date
                    dayTextColor: '#2d4150', // Default day text color
                    textDisabledColor: '#d9e1e8', // Color for disabled days
                    dotColor: '#00adf5', // Default dot color
                    selectedDotColor: '#ffffff', // Dot color for selected day
                    arrowColor: '#00adf5', // Color for navigation arrows
                    monthTextColor: '#00adf5', // Color for month text
                    indicatorColor: 'blue', // Color for loading indicator
                    textDayFontFamily: 'monospace', // Font family for day numbers
                    textMonthFontFamily: 'monospace', // Font family for month text
                    textDayHeaderFontFamily: 'monospace', // Font family for day headers
                    textDayFontSize: 16, // Font size for day numbers
                    textMonthFontSize: 16, // Font size for month text
                    textDayHeaderFontSize: 16 // Font size for day headers
                }}
            />
        </View>
    );
};

// Export the main App component as default
export default function App() {
    return (
        // Render a View container with flex layout and center alignment
        <View style={{ 
            flex: 1, // Take up the full screen
            justifyContent: 'center', // Center content vertically
            alignItems: 'center' // Center content horizontally
        }}>
            {/* Render the custom MyCalendar component */}
            <MyCalendar />
        </View>
    );
}

Output


Comment
Article Tags:
React Native
React-Native

Explore