How to crate a Calendar App in React Native using Pure JavaScript/Typescript and without any External Libraries

We are going to create a calendar application without using any external libraries just using Typescript.

Pre requisite: Make sure to have a react native development environment.

Let’s start by creating a react native application

npx react-native init CalendarApp --template react-native-template-typescript
cd CalendarApp

Let’s start by creating a const.ts file for storing all the constants related to Calendar component

// src/components/Calendar/consts.ts
export const months = ["January", "February", "March", "April", 
"May", "June", "July", "August", "September", "October", 
"November", "December"];
 
export const weekDays = [
    "Sun","Mon","Tue","Wed","Thu","Fri","Sat"
];

export const daysInEachMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

We need to create a two dimensional array containing days and date in the calendar format. For that let’s create a function called generateMatrix which handles this logic.

Let’s create a Calendar component called Calendar.tsx Inside the src/compoents/Calender folder

Let’s import the component in App.tsx and implement functionalities like jump to the date in the file:

References:

Link to the Snack: https://snack.expo.dev/@yajana/calendarapp

Link to the GitHub repo: https://github.com/YajanaRao/CalendarApp