Step-By-Step Guide To Creating a Calendar In React Native

React Native is one of the most widely utilized programming languages for mobile app development in the world. Now, there is a massive requirement of building calendars in most business apps. Explore this blog to learn the simplest way to build a calendar in React Native.

 

 

Introduction 

 

React Native is one of the most effective JavaScript frameworks that can elevate your programming skills and development experience to a whole new level.

 

In this digital world, the professional and personal lifestyles of humans have changed since the last two decades. Our lives have not only become faster, but also hectic as we have to cope with so many things. So, applications that can plan schedules for people and let them know about day and month are essential. Having a calendar application can not only help you plan better schedules, but also make you aware of all the upcoming events and due dates during the month. Therefore, this post will explain building a calendar application using React Native programming language.

 

We are using React Native because it has everything a programmer could ask for to ensure a successful project execution and dynamic product development. Being a leading React Native programming development agency, we understand the requirement of the clients, so we tried to deliver an easy way to create a calendar component using the JavaScript framework.

 

Without wasting any more time, let's get into the step-by-step tutorial for creating a calendar in React Native.

Step 1: Get a Reliable IDE

With React Native programming language, it is required to install a couple of reliable files and software inside your system to create all the necessary dependencies to build your application. Therefore, we will use the simplest way to create a calendar component in React Native. We are going to use an all-in-one IDE that will require you no additional setup thanks to its plug-and-play feature.Use CodeSandbox to do the same. Just download and run the IDE.

 

Below is the directory structure that we are going to follow for this project:

 

 

Here’s the code for the calendar component.

 

Include the calendar component inside the index.js file.

import React from "react";
import ReactDOM from "react-dom";

import Calendar from "./components/calendar";

function App() {
return (
<div className="App">
<Calendar />
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Please verify the output of the above code. You should see Calendar written as the heading in the output window. If you don't see that, make sure that you have written the correct code.

Now, we will create a layout that will display abbreviations of the days.

Step 2: Add Days

You need to install a moment and add a moment as the dependencies in React Native.

Now import the moment to the calendar component.

Import moment from 'moment.'

Now, use moment.weekdaysShort(); to get a short weekday.

weekdayshort = moment.weekdaysShort();

Synchronize the day feature with a function that returns a short day with <th>. The day will contain a short date name.

let weekdayshortname = this.weekdayshort.map(day => {
return (
<th key={day} className="week-day">
{day}
</th>
);
});

Now, you can get tail.Datetime, which is a beautiful CSS component that can improve the UI of the calendar component. 

Step 3: Locating the First Day of The Month

In any calendar, you will see that it starts on a particular day of each month.

Indeed, the first day of the month would be on different days for each month, but you have to decide which day would be the first day of the new week in your calendar. For that, create a moment state variable.

state = {
dateObject: moment()
}

The state of the variable would be modified through a third-party function that we are going to define below. Currently, we need to store the object of the moment, the first day of the month. We will be using a better method to store the first day of the month.

firstDayOfMonth = () => {
let dateObject = this.state.dateObject;
let firstDay = moment(dateObject)
.startOf("month")
.format("d");
return firstDay;
};

Now we will be creating a blank area to find the first date of the month.

let blanks = [];
for (let i = 0; i < this.firstDayOfMonth(); i++) {
blanks.push(
<td className="calendar-day empty">{""}</td>
);
}

Now, let’s generate </td> of date in the month.

let daysInMonth = [];
for (let d = 1; d <= this.daysInMonth(); d++) {
daysInMonth.push(
<td key={d} className="calendar-day">
{d}
</td>
);
}

Let's define some more variables for better execution.

totalSlots contains blanks and daysInMonth using the operator. These variables have dynamic values.

rows hold </td>while going to a new row

cells contain each </td> to assign to each row

var totalSlots = [...blanks, ...daysInMonth];
let rows = [];
let cells = [];

Now, we will go through totalSlots to get a calendar structure week.

totalSlots.forEach((row, i) => {
if (i % 7 !== 0) {
cells.push(row); // if index not equal 7 that means not go to next week
} else {
rows.push(cells); // when reach next week we contain all td in last week to rows
cells = []; // empty container
cells.push(row); // in current loop we still push current row to new container
}
if (i === totalSlots.length - 1) { // when end loop we add remain date
rows.push(cells);
}
});

Wrap all rows in </td>

let daysinmonth = rows.map((d, i) => {
return <tr>{d}</tr>;
});

And the </td> in <tbody>

<table className="calendar-day">
<thead>
<tr>{weekdayshortname}</tr>
</thead>
<tbody>{daysinmonth}</tbody>
</table>

Now, you should see the correct day along with the right date, so everything falls in place.

Step 4: Highlight the Current Day

currentDay = () => {
return this.state.dateObject.format("D");
};

The above code will find the current date.

let daysInMonth = [];
for (let d = 1; d <= this.daysInMonth(); d++){
let currentDay = d == this.currentDay() ? "today" : "";
daysInMonth.push(
<td key={d} className={`calendar-day ${currentDay}`}>
{d}
</td>);
}
}

To verify if the current date is correct or not, we are going to put a conditional operator. If the returned value is correct, we will add a class today while pushing to the daysInMonth.

let daysInMonth = [];
for (let d = 1; d <= this.daysInMonth(); d++){
let currentDay = d == this.currentDay() ? "today" : "";
daysInMonth.push(
<td key={d} className={`calendar-day ${currentDay}`}>
{d}
</td>);
}
}

Now, we will add a function to pick a month of our choice.

Step 5: Add Name of Months

After the calendar table div, insert the month picker div.

return (
<div className="tail-datetime-calendar">
<div className="calendar-navi">
</div>
)

Insert the current month name with momentObject.

month = () => {
return this.state.dateObject.format("MMMM");
};

Show the month in div.

return (
        <div className="tail-datetime-calendar">
        <div className="calendar-navi">
           {this.month()}
        </div>
)

<span data-tail-navi="switch" class="calendar-label">
       {this.month()}
</span>

Now, you should be able to see the name of the month above the calendar table with an attractive layout.

We need to write the code that changes the name of the month as time goes. Otherwise, the current name of the month will be displayed throughout the year. We will write a render function that will render the month table. With the help of moment object, get all months and assign them to allMonths state.

For learning in detail about this, you must have knowledge about the Core Concept Of React. It will help you all in the long run.

state = {
dateObject: moment(),
allmonths :moment.months()
};

Now, develop another function to handle this month's table.

MonthList = props => {}

Props are the selected month object (Jan-Dec).

let months = [];
props.data.map(data => {
months.push(
<td>
<span>{data}</span>
</td>
);
});

Now we will need to define the cells that contain the name of the month.

let rows = [];
let cells = [];

Grab the condition from the calendar table for this table

months.forEach((row, i) => {
if (i % 3 !== 0 || i == 0) { // except zero index
cells.push(row);
} else {
rows.push(cells);
cells = [];
cells.push(row);
}
});
rows.push(cells); // add last row

Map over the rows and wrap them in <tr>

let monthlist = rows.map((d, i) => {
return <tr>{d}</tr>;
});

Now, return the proper table in HTML, styled with some tail.Datetime CSS.

return (
<table className="calendar-month">
<thead>
<tr>
<th colSpan="4">Select a Month</th>
</tr>
</thead>
<tbody>{monthlist}</tbody>
</table>
);

Now, we need to render the program in the parent.

<div className="calendar-date">
<this.MonthList data={moment.months()} />
</div>

In the output, you will also get another table that will display the name of the month. Observe that these names are not clickable, and based on the month you click, the below part of the calendar is not changing accordingly. To do that, we will write the code below.

Step 6: Sync Months with Dates

Create a setMonth function.

setMonth = month => {
let monthNo = this.months.indexOf(month);// get month number
let dateObject = Object.assign({}, this.state.dateObject);
dateObject = moment(dateObject).set("month", monthNo); // change month value
this.setState({
dateObject: dateObject // add to state
});
};

Add it to <td>

props.data.map(data => {
months.push(
<td
key={data}
className="calendar-month"
onClick={e => {
this.setMonth(data);
}}
>
<span>{data}</span>
</td>
);
});

Now, whenever you click on the name of the month, the calendar should change accordingly, along with the right dates. The table of month picker is currently creating redundancy and not required to be there all the time. You can also hide that month picker table as soon as it is selected. Add a showMonthTable state to do this task.

state = {
showMonthTable:false,
dateObject: moment(),
allmonths: moment.months()
};

To hide on first T load, add a simple check state in the calendar-date div.

<div className="calendar-date">
{this.state.showMonthTable &&
< this.MonthList data = {moment.months()} />}
</div>

With this dress code, the month table will be hidden, and the selected name of the month will be displayed at the top of the date table. We need to create a showTable method that will display the table of the month name when the user clicks it.

<div className="calendar-navi"
onClick={e => {
this.showMonth();
}}
>

Define the action to toggle the state.

showMonth = (e, month) => {
this.setState({
showMonthTable: !this.state.showMonthTable
});
};

When you click on the selector, the calendar layout expands, and the names of the months are also being displayed.

However, a great unique experience should display only one table at a time.

To do that, you can write the code below.

{ !this.state.showMonthTable && (
<div className="calendar-date">
<table className="calendar-day">
<thead>
<tr>{weekdayshortname}</tr>
</thead>
<tbody>{daysinmonth}</tbody>
</table>
</div>)}

This code will only make one table active at a time. Whenever you choose to change the name of the month, the table of the date will be hidden and vice versa.

Conclusion

Please let me know your thoughts about this article and how you are planning to build your calendar component in React Native.

I would love to know your feedback in the comments below.