Build a Calendar in React from Scratch

Creating a calendar component in React is an excellent way to strengthen your skills, enhance your app’s functionality, and provide users with a better experience. In this comprehensive guide, we will walk through the process to create a fully functional calendar from scratch using React. This article is structured into digestible sections to help you grasp each step easily. Let’s get started!

Why Build a Calendar Component?

A calendar component is versatile and can be used in various applications such as event scheduling, task management, reminders, and even for personal time management. Building it from scratch allows for customization according to your specific needs and creative flair.

Setting Up Your React Environment

Before diving into the calendar component, ensure that you have a React environment set up. You can set up your React environment using Create React App:

npx create-react-app calendar-app
cd calendar-app
npm start

Once your environment is ready, open your project in your code editor of choice.

Creating the Calendar Component

Let’s create a new component called Calendar.js. To do this, create a new folder named components and then create a file named Calendar.js inside it.

mkdir src/components
touch src/components/Calendar.js

Now, open Calendar.js and import React:

import React, { useState } from "react";

Defining the Calendar Layout

We’ll create the basic structure of the calendar by defining the layout. A calendar typically displays a month view, showing the days arranged in a grid. Here’s how we can create this layout:

const Calendar = () => {
    const [currentMonth, setCurrentMonth] = useState(new Date());

    const daysInMonth = new Date(
        currentMonth.getFullYear(),
        currentMonth.getMonth() + 1,
        0
    ).getDate();

    const firstDayOfMonth = new Date(
        currentMonth.getFullYear(),
        currentMonth.getMonth(),
        1
    ).getDay();

    return (
        <div style={{ textAlign: "center" }}>
            <h1>{currentMonth.toLocaleString('default', { month: 'long' })} {currentMonth.getFullYear()}</h1>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '5px' }}>
                {Array.from({ length: firstDayOfMonth }).map((_, index) => (
                    <div key={index}></div>
                ))}
                {Array.from({ length: daysInMonth }).map((_, index) => (
                    <div key={index + 1}>{index + 1}</div>
                ))}
            </div>
        </div>
    );
};

This code creates a calendar layout where the days of the month are displayed in a grid format. The month and year are dynamically generated based on the currentMonth state. The days of the month and the first day of the month are calculated using JavaScript’s Date object.

Styling the Calendar

To enhance the visual appeal, let’s add some basic CSS styling. Create a new CSS file called Calendar.css and import it into Calendar.js:

import "./Calendar.css";

Calendar.css file content would look like this:

.calendar {
    margin: 20px auto;
    width: 80%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.calendar-day {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.calendar-day:hover {
    background-color: #eeffee;
    cursor: pointer;
}

Now, let’s apply these styles in our component:

return (
    <div className="calendar">
        ...
        <div className="calendar-day" key={index + 1}>{index + 1}</div>
        ...
    </div>
);

Adding Navigation for Months

Next, we need the functionality to navigate between months. We can do this by adding “Previous” and “Next” buttons to our calendar component. Here’s how you can implement that:

const handlePreviousMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
};

const handleNextMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
};

return (
    <div className="calendar">
        <button onClick={handlePreviousMonth}>Previous</button>
        <button onClick={handleNextMonth}>Next</button>
        ...
    </div>
);

With these event handlers, the calendar will now allow users to navigate backward and forward through the months.

Displaying Events on the Calendar

Now let’s take it a step further by enabling events to be displayed on specific dates. For this, we’ll enhance our state to include events and add functionality for users to create new events:

const [events, setEvents] = useState({});

const addEvent = (day) => {
    const eventTitle = prompt("Enter event title:");
    if (eventTitle) {
        setEvents(prevEvents => ({
            ...prevEvents,
            [day]: [...(prevEvents[day] || []), eventTitle],
        }));
    }
};

return (
    ...
    {Array.from({ length: daysInMonth }).map((_, index) => {
        const day = index + 1;
        return (
            <div key={day} className="calendar-day" onClick={() => addEvent(day)}>
                {day}
                <div>{events[day] ? events[day].join(", ") : ""}</div>
            </div>
        );
    })}
    ...
);

With the above code, when a date is clicked, a prompt will allow the user to add an event, which will store the event under the corresponding date in our events state.

Final Touches and Improvements

Now that you have a fully functioning calendar, consider enhancing it further:

• Include Local Storage: Store events in local storage to preserve user data across sessions.
• Responsive Design: Ensure your calendar is responsive for various screen sizes.
• Custom Styling: Employ tools like CSS modules or styled-components to enhance styling.
• Drag-and-drop Functionality: Allow users to drag and drop events between dates.

Conclusion

Building a calendar in React from scratch not only enhances your React skills but also helps you understand how to manage state effectively and provide interactive features in your applications. By following the steps in this guide, you’ve developed a customizable calendar component that can be easily integrated into larger projects.

Don’t hesitate to experiment further and make it your own. Happy coding!