Build a Calendar in React from Scratch

Creating a calendar from scratch using React is a fantastic project for developers looking to enhance their skills. This tutorial will guide you through the process step-by-step, providing clear instructions and code samples. Whether you are a beginner or an experienced developer, this project will provide valuable insights into React’s component architecture, state management, and event handling.

Why Build a Calendar?

Building a calendar application offers a hands-on experience with core React concepts such as:

• Component Composition
• State Management
• Event Handling
• Conditional Rendering

Additionally, a calendar app can be a practical addition to your portfolio, showcasing your skills to potential employers or clients.

Setting Up the React Project

Before diving into code, let’s set up a new React project using Create React App. Open your terminal and run:

npx create-react-app react-calendar

Once the setup is complete, navigate into your project directory:

cd react-calendar

Now, you can start the development server:

npm start

Your browser will open at http://localhost:3000, displaying a new React app!

Project Structure

For our calendar application, we’ll keep things organized. Here is a simple structure we’ll follow:

src/
├── components/
│   ├── Calendar.js
│   ├── Day.js
│   └── Header.js
└── App.js

Creating the Calendar Component

Start by creating a new component named Calendar.js inside the components directory. This component will be the heart of our calendar application.

// src/components/Calendar.js
import React, { useState } from 'react';
import Header from './Header';
import Day from './Day';

const Calendar = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    const getDaysInMonth = (month, year) => {
        return new Date(year, month + 1, 0).getDate();
    };

    const getDayStartIndex = (month, year) => {
        return new Date(year, month, 1).getDay();
    };

    const generateCalendar = () => {
        const daysInMonth = getDaysInMonth(currentDate.getMonth(), currentDate.getFullYear());
        const firstDayIndex = getDayStartIndex(currentDate.getMonth(), currentDate.getFullYear());
        
        const daysArray = [];
        for (let i = 0; i < firstDayIndex; i++) {
            daysArray.push();
        }
        for (let day = 1; day <= daysInMonth; day++) {
            daysArray.push();
        }
        
        return daysArray;
    };

    return (
        

            

            
                        {generateCalendar()}
                    

                

                    

                        
Sun
                        
Mon
                        
Tue
                        
Wed
                        
Thu
                        
Fri
                        
Sat
                    
                
                

                    

                
            
        
    );
};

export default Calendar;

Creating the Day Component

Next, let’s create a Day component that will represent each individual day in the calendar. Create a new file named Day.js inside the components directory.

// src/components/Day.js
import React from 'react';

const Day = ({ day }) => {
    return (
        
            {day}
        
    );
};

export default Day;

Creating the Header Component

The Header component will display the current month and year, along with buttons to navigate between months. Create a file named Header.js.

// src/components/Header.js
import React from 'react';

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

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

    return (
        

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

export default Header;

Styling the Calendar

Now that we have our components set up, it’s time to style our calendar. Create a new file named Calendar.css in the src directory and add the following styles:

.calendar {
    max-width: 600px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    width: 14.28%;
    height: 100px;
    text-align: center;
    border: 1px solid #ccc;
}

.day {
    background-color: #f9f9f9;
}

.empty {
    background-color: #ffffff;
}

Finally, import the styles into your Calendar.js component:

// src/components/Calendar.js
import './Calendar.css';

Integrating Calendar Component in App

To display our Calendar component, let’s integrate it into our App.js file.

// src/App.js
import React from 'react';
import Calendar from './components/Calendar';

const App = () => {
    return (
        

            
My React Calendar
            
        
    );
};

export default App;

Final Touches and Running the App

Your calendar application is now complete! Run your development server once again and navigate to http://localhost:3000. You should see a fully functional calendar!

Enhancing Functionality

Once you have the basic calendar working, here are some features you might consider adding:

• Event Management: Allow users to add, edit, and delete events on specific days.
• Different Views: Implement views for week and day, in addition to the month view.
• Styling Enhancements: Use libraries like styled-components or Bootstrap for better UI.
• Mobile Responsiveness: Make your calendar responsive for mobile devices.

Conclusion

Building a calendar in React is not only a great learning experience but also a practical tool that can be extended to meet many needs. By mastering components, state management, and event-driven programming, you can enhance your skills and create more complex applications in the future.

Don’t forget to experiment with additional features and styles to make your calendar unique. Happy coding!