Building a Custom Calendar in React

React is a powerful and popular JavaScript library used for creating user interfaces. Its component-based approach makes it easy to create complex, dynamic web applications. With React, you can create everything from a simple web page to a complex web application.

One of the most common components of web applications is a calendar. Calendars are used to display events, meetings, and other important information. Fortunately, creating a custom calendar in React is not that difficult. In this article, we will go over how to set up and build a custom calendar in React.

What is React-Calendar?

React-Calendar is a popular open source library for creating custom calendars in React. It is lightweight, customizable, and provides a lot of features out of the box. It is used by many large companies, including Facebook, Netflix, and Airbnb.

Setting Up The React Project

Before we can start building our custom calendar, we first need to set up a React project. To do this, we will be using the Create React App tool.

First, let's create a new project using the following command:

npx create-react-app my-calendar

Once the project is created, we can install the React-Calendar library using the following command:

npm install react-calendar

How to Build a Custom Calendar in React

Now that we have our project set up, let's start building our custom calendar. We will start by creating a basic calendar component.

First, let's create a new file called Calendar.js in the src folder of our project.

In this file, we can start by importing the necessary libraries and components:

import React, { useState } from "react";
import Calendar from "react-calendar";

Next, let's create our Calendar component. We will use the useState hook to initialize the date state:

function Calendar() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <Calendar
        onChange={date => setDate(date)}
        value={date}
      />
    </div>
  );
}

In the above code, we are using the Calendar component from the react-calendar library. We are also passing the date state as the value prop, and setting the onChange prop to a function that updates the date state when the user selects a new date.

Now, we can render our Calendar component in our App component:

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

If we run our application, we should see a basic calendar with the current date selected.

How to Style a Custom Calendar in React

Now that we have our basic calendar set up, let's add some styling to it. React-Calendar provides a range of built-in styling options to choose from.

For example, we can add a custom background color to the calendar with the tileClassName prop:

<Calendar
  onChange={date => setDate(date)}
  value={date}
  tileClassName="custom-background"
/>

We can then define our custom background color in the App.css file:

.custom-background {
  background-color: #F7F7F7;
}

We can also add custom styles to the selected date with the tileContent prop:

<Calendar
  onChange={date => setDate(date)}
  value={date}
  tileContent={({ date, view }) => (
    <div className="custom-date-style">
      {date.getDate()}
    </div>
  )}
/>

And then define the custom style in the App.css file:

.custom-date-style {
  color: #FFFFFF;
  background-color: #3F51B5;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Various Calendar Examples in React

Now that we know how to set up and style our custom calendar, let's look at some examples of what we can do with it.

Displaying Events

We can use the onClickDay prop to display events when a user clicks on a day:

<Calendar
  onChange={date => setDate(date)}
  value={date}
  onClickDay={date => alert(`You have an event on ${date.toLocaleDateString()}`)}
/>

Selecting Multiple Dates

We can also use the selectRange prop to allow users to select multiple dates:

<Calendar
  onChange={date => setDate(date)}
  value={date}
  selectRange={true}
/>

Customizing The Date Format

Finally, we can use the formatDate prop to customize the date format that is displayed in the calendar:

<Calendar
  onChange={date => setDate(date)}
  value={date}
  formatDate={date => date.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
/>

Conclusion

In this article, we went over how to set up and build a custom calendar in React. We discussed how to use the React-Calendar library to create a basic calendar, and how to add styling and various features to it. We also looked at some examples of what we can do with a custom calendar in React.

Creating custom calendars in React is a great way to add functionality and visual appeal to your web applications. With the help of the React-Calendar library, it is relatively easy to create complex and powerful calendars.