Building a Calendar in React from Scratch

If you’ve ever needed to incorporate a calendar into your web application, building one from scratch using React can be a rewarding challenge. In this tutorial, we’ll guide you through every step, from setting up your environment to implementing features like month navigation and event display. By the end, you’ll have a fully functional calendar component that can be a robust base for further enhancements.

Table of Contents

• Setting Up Your Environment
• Core Calendar Structure
• Implementing Month Navigation
• Adding Events
• Styling Your Calendar
• Wrapping Up

1. Setting Up Your Environment

To begin, you’ll need to set up your React development environment. If you have Node.js installed, creating a new React app is simple. Open your terminal and run:

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

This command will create a new React application called calendar-app and open it in your default browser.

2. Core Calendar Structure

Now that our development environment is ready, let’s create a basic calendar structure. Replace the contents of src/App.js with the following code:

import React, { useState } from 'react';

const App = () => {
    const [currentDate, setCurrentDate] = useState(new Date());
    
    const getDaysInMonth = (date) => {
        let year = date.getFullYear();
        let month = date.getMonth();
        return new Date(year, month + 1, 0).getDate();
    };

    const generateCalendar = () => {
        const daysInMonth = getDaysInMonth(currentDate);
        let daysArray = [];
        for (let day = 1; day <= daysInMonth; day++) {
            daysArray.push(day);
        }
        return daysArray;
    };

    return (
        

            
{currentDate.toLocaleString('default', { month: 'long' })} {currentDate.getFullYear()}
            

                {generateCalendar().map(day => (
                    
{day}
                ))}
            
        
    );
};

export default App;

In this code, we’re using React’s useState hook to manage the current date and a function to generate the days of the month. We then render these days in a grid layout.

3. Implementing Month Navigation

Next, let’s add navigation functionality to switch between months. Update the App.js file to include buttons for navigating through the months:

const App = () => {
    // ... existing code

    const goToPreviousMonth = () => {
        const newDate = new Date(currentDate.setMonth(currentDate.getMonth() - 1));
        setCurrentDate(newDate);
    };

    const goToNextMonth = () => {
        const newDate = new Date(currentDate.setMonth(currentDate.getMonth() + 1));
        setCurrentDate(newDate);
    };

    return (
        

            Previous
            Next
            
{currentDate.toLocaleString('default', { month: 'long' })} {currentDate.getFullYear()}
            

                {generateCalendar().map(day => (
                    
{day}
                ))}
            
        
    );
};

Now, users can navigate to previous and next months. The goToPreviousMonth and goToNextMonth functions adjust the current date accordingly.

4. Adding Events

To make our calendar functional, let’s implement an event feature. We’ll create a simple form to add events to specific days. Let’s modify the code to store events:

const App = () => {
    const [events, setEvents] = useState({});
    const [eventInput, setEventInput] = useState('');

    const addEvent = (day) => {
        const key = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${day}`;
        setEvents({
            ...events,
            [key]: [...(events[key] || []), eventInput]
        });
        setEventInput('');
    };

    return (
        

            Previous
            Next
            
{currentDate.toLocaleString('default', { month: 'long' })} {currentDate.getFullYear()}
            

                {generateCalendar().map(day => (
                    

                        
{day}
                        

                            {(events[`${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${day}`] || []).map((event, index) => (
                                
{event}
                            ))}
                        
                         setEventInput(e.target.value)} 
                            placeholder="Add event" 
                        />
                         addEvent(day)}>Add
                    
                ))}
            
        
    );
};

In this modification, we introduce:

• events: A state variable that keeps track of events for each day.
• eventInput: A state variable for the input field where users can type their event.
• addEvent: A function that takes the day, stores the event against the specific day’s key within the events object.

5. Styling Your Calendar

Styling is crucial to making your calendar visually appealing. Let’s add some basic CSS. Create a file called src/App.css and add the following styles:

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day {
    border: 1px solid #ccc;
    padding: 10px;
    height: 100px;
}

input {
    margin-top: 5px;
    width: 80%;
}

button {
    margin-top: 5px;
}

Import the CSS into your App.js:

import './App.css';

This CSS will give you a basic layout with a grid structure for the calendar and styling for the event input fields.

6. Wrapping Up

Congratulations! You’ve successfully built a calendar in React from scratch. You now have a foundational calendar app with month navigation and event management features. The next steps in enhancement may include:

• Adding more complex event functionalities (like editing and deleting events).
• Adding support for multiple users/events.
• Integrating with APIs for better data handling.

By utilizing React’s component-driven architecture, you can further expand your calendar to meet any requirements you may have.

Happy coding!