Build a React JS Interactive Simple Interactive Calendar

Written by

javascriptfundamentals

in

In the world of web development, we often encounter the need to display dates and schedules. From booking appointments to planning events, calendars are a fundamental UI component. Creating a custom calendar from scratch can be a complex task, but with React JS, we can build an interactive, user-friendly calendar component with ease. This tutorial will guide you through building a simple yet effective calendar, perfect for beginners and intermediate developers alike. We’ll explore React’s component-based architecture, state management, and event handling to create a dynamic calendar that you can integrate into your projects.

Why Build a Calendar Component?

While there are many pre-built calendar libraries available, building your own offers several advantages:

  • Customization: You have complete control over the look, feel, and functionality of your calendar.
  • Learning: It’s an excellent way to deepen your understanding of React and component design.
  • Performance: You can optimize the component specifically for your needs, potentially improving performance.
  • No External Dependencies: Reduces the size of your project and eliminates the need to manage external libraries.

This tutorial will not only teach you how to build a calendar but also provide you with a solid foundation in React concepts.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code.
  • A code editor (e.g., VS Code, Sublime Text): This will be your primary tool for writing code.

Setting Up the Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-calendar-tutorial
cd react-calendar-tutorial

This command creates a new React project named “react-calendar-tutorial”. Now, navigate into the project directory.

Project Structure and Initial Setup

Your project directory should look something like this:

react-calendar-tutorial/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

We’ll be working primarily in the src directory. Open src/App.js and clear out the default content. Replace it with the following basic structure:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <h1>React Calendar</h1>
      <div className="calendar">
        {/* Calendar content will go here */}
      </div>
    </div>
  );
}

export default App;

Also, add some basic styling to src/App.css:

.app {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

.calendar {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin: 20px auto;
  width: 300px; /* Adjust as needed */
}

This sets up the basic layout for our calendar. Run the application using npm start or yarn start to see the initial setup in your browser. You should see a heading “React Calendar” and a bordered box where the calendar will eventually appear.

Creating the Calendar Component: Month and Year Display

Let’s start by displaying the current month and year. Create a new component file named src/Calendar.js:

import React, { useState } from 'react';

function Calendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());

  const months = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];

  return (
    <div className="calendar">
      <div className="calendar-header">
        <button><</button>
        <span>{months[currentMonth]} {currentYear}</span>
        <button>>></button>
      </div>
      {/* Calendar content will go here */}
    </div>
  );
}

export default Calendar;

Here, we:

  • Imported useState to manage the current month and year.
  • Initialized currentMonth and currentYear with the current date’s month and year.
  • Created an array of month names.
  • Displayed the month and year in a header.

Now, import and render this component in src/App.js:

import React from 'react';
import './App.css';
import Calendar from './Calendar';

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

export default App;

Refresh your browser. You should now see the current month and year displayed in the calendar header. Add basic styling to src/Calendar.css to make the header look nicer:

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-header button {
  background-color: #f0f0f0;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

.calendar-header button:hover {
  background-color: #ddd;
}

Don’t forget to import this CSS file in Calendar.js: import './Calendar.css';

Adding Navigation Buttons

Let’s add functionality to navigate between months. In src/Calendar.js, add the following functions:

  const goToPreviousMonth = () => {
    if (currentMonth === 0) {
      setCurrentMonth(11);
      setCurrentYear(currentYear - 1);
    } else {
      setCurrentMonth(currentMonth - 1);
    }
  };

  const goToNextMonth = () => {
    if (currentMonth === 11) {
      setCurrentMonth(0);
      setCurrentYear(currentYear + 1);
    } else {
      setCurrentMonth(currentMonth + 1);
    }
  };

And connect them to the buttons in the render function:

<button onClick={goToPreviousMonth}><</button>
<span>{months[currentMonth]} {currentYear}</span>
<button onClick={goToNextMonth}>>></button>

Now, the buttons should navigate between months. Test them out!

Generating the Calendar Days

The next step is to generate the days of the month. Add the following function in src/Calendar.js:

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

  const daysInMonth = getDaysInMonth(currentMonth, currentYear);

  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay(); // 0 (Sunday) to 6 (Saturday)

  const days = [];
  for (let i = 0; i < firstDayOfMonth; i++) {
    days.push(<div className="day empty" key={`empty-${i}`}></div>);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    days.push(<div className="day" key={i}>{i}</div>);
  }

Here’s what the code does:

  • getDaysInMonth: Calculates the number of days in a given month.
  • daysInMonth: Uses getDaysInMonth to get the number of days in the current month.
  • firstDayOfMonth: Determines the day of the week the month starts on (0-6, where 0 is Sunday).
  • Creates an array days:
    • Adds empty days at the beginning to account for the days before the first day of the month.
    • Adds the day numbers for each day of the month.

Add the following code inside the <div className=”calendar”> in the render function:

<div className="calendar-days">
  {days}
</div>

And add some styling in src/Calendar.css:

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

.day {
  border: 1px solid #eee;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
}

.day:hover {
  background-color: #f0f0f0;
}

.empty {
  border: none;
  background-color: transparent;
  cursor: default;
}

Now, you should see the calendar days displayed in a grid. The empty divs will create the spacing for days that fall on the preceding month. The current date will be displayed.

Adding Weekday Headers

Let’s add weekday headers to make the calendar more readable. In src/Calendar.js, add the following code inside the main `<div className=”calendar”>` but *before* the `<div className=”calendar-days”>` section:

<div className="calendar-weekdays">
  <div className="weekday">Sun</div>
  <div className="weekday">Mon</div>
  <div className="weekday">Tue</div>
  <div className="weekday">Wed</div>
  <div className="weekday">Thu</div>
  <div className="weekday">Fri</div>
  <div className="weekday">Sat</div>
</div>

And add the corresponding CSS to src/Calendar.css:

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

.weekday {
  text-align: center;
  font-weight: bold;
  padding: 5px;
}

Now, you should see the weekday headers above the calendar days.

Highlighting the Current Day

Let’s highlight the current day in the calendar. Add this code inside the `days.push()` loop in src/Calendar.js, *before* the closing `</div>` tag:

  const today = new Date();
  const isCurrentDay = i === today.getDate() &&
                     currentMonth === today.getMonth() &&
                     currentYear === today.getFullYear();

  return (
    <div className="day" key={i} className={isCurrentDay ? "day current-day" : "day"}>{i}</div>
  );

And add the following CSS to src/Calendar.css:

.current-day {
  background-color: #b3d9ff;
  font-weight: bold;
}

This checks if the current day is the same as the day being rendered and applies a special class if it is. Now, the current day should be highlighted.

Adding Click Functionality to Days

Let’s make the calendar interactive by allowing users to click on a day. Add the following to src/Calendar.js:

  const [selectedDay, setSelectedDay] = useState(null);

  const handleDayClick = (day) => {
    setSelectedDay(day);
    // You can add further actions here, such as displaying event details.
  };

Modify the day rendering inside the `days.push()` loop to include an `onClick` handler:

<div
  className={isCurrentDay ? "day current-day" : "day"}
  key={i}
  onClick={() => handleDayClick(i)}
>
  {i}
</div>

Finally, display the selected day (or nothing) below the calendar in the render function:

<div className="selected-day">
  {selectedDay ? `Selected day: ${selectedDay}, ${months[currentMonth]} ${currentYear}` : 'No day selected'}
</div>

And add some CSS to src/Calendar.css:

.selected-day {
  margin-top: 10px;
  font-style: italic;
}

Now, clicking a day should highlight it and display the selected date below the calendar. You can expand the handleDayClick function to perform actions when a day is clicked, such as displaying event details or opening a form.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Date Display: Make sure you’re using the correct methods to get the month (getMonth(), which is 0-indexed) and day (getDate()).
  • Navigation Issues: Double-check your logic in goToPreviousMonth and goToNextMonth to ensure that you are correctly handling the transitions between months and years.
  • CSS Styling Problems: Ensure your CSS is correctly linked and that your class names match the ones in your React components. Use your browser’s developer tools to inspect the elements and see if the CSS rules are being applied.
  • Missing or Incorrect Imports: Ensure that you have imported all necessary modules and components, and that the paths are correct.
  • State Management Errors: When updating the state, ensure that you’re using the correct state update functions (e.g., setCurrentMonth, setCurrentYear) and that you’re updating the state correctly.

Key Takeaways and Best Practices

  • Component-Based Architecture: React allows you to break down complex UI elements into smaller, reusable components, making your code more organized and maintainable.
  • State Management: Using useState to manage the state of your component allows you to update the UI dynamically in response to user interactions.
  • Event Handling: React’s event handling system allows you to respond to user actions, such as button clicks, and trigger corresponding actions.
  • CSS Styling: Consider using CSS-in-JS libraries (like styled-components) or a CSS preprocessor (like Sass) for more maintainable and scalable styling.
  • Accessibility: Consider accessibility best practices, such as using semantic HTML elements and providing ARIA attributes, to make your calendar accessible to users with disabilities.
  • Error Handling: Implement error handling to gracefully handle unexpected situations, such as invalid date inputs.

Enhancements and Further Development

Here are some ideas for enhancing your calendar:

  • Event Integration: Allow users to add, edit, and delete events for each day.
  • Different Views: Implement month, week, and day views.
  • API Integration: Fetch events from a backend API.
  • Styling and Customization: Allow users to customize the appearance of the calendar.
  • Responsiveness: Make the calendar responsive to different screen sizes.
  • Internationalization (i18n): Support different languages and date formats.

By implementing these enhancements, you can transform your simple calendar into a powerful and versatile tool.

Summary of Code

Here is the complete code for src/Calendar.js for quick reference:

import React, { useState } from 'react';
import './Calendar.css';

function Calendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  const [selectedDay, setSelectedDay] = useState(null);

  const months = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];

  const goToPreviousMonth = () => {
    if (currentMonth === 0) {
      setCurrentMonth(11);
      setCurrentYear(currentYear - 1);
    } else {
      setCurrentMonth(currentMonth - 1);
    }
  };

  const goToNextMonth = () => {
    if (currentMonth === 11) {
      setCurrentMonth(0);
      setCurrentYear(currentYear + 1);
    } else {
      setCurrentMonth(currentMonth + 1);
    }
  };

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

  const daysInMonth = getDaysInMonth(currentMonth, currentYear);

  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay(); // 0 (Sunday) to 6 (Saturday)

  const days = [];
  for (let i = 0; i < firstDayOfMonth; i++) {
    days.push(<div className="day empty" key={`empty-${i}`}></div>);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    const today = new Date();
    const isCurrentDay = i === today.getDate() &&
                         currentMonth === today.getMonth() &&
                         currentYear === today.getFullYear();

    days.push(
      <div
        className={isCurrentDay ? "day current-day" : "day"}
        key={i}
        onClick={() => handleDayClick(i)}
      >
        {i}
      </div>
    );
  }

  const handleDayClick = (day) => {
    setSelectedDay(day);
  };

  return (
    <div className="calendar">
      <div className="calendar-header">
        <button onClick={goToPreviousMonth}><</button>
        <span>{months[currentMonth]} {currentYear}</span>
        <button onClick={goToNextMonth}>>></button>
      </div>
      <div className="calendar-weekdays">
        <div className="weekday">Sun</div>
        <div className="weekday">Mon</div>
        <div className="weekday">Tue</div>
        <div className="weekday">Wed</div>
        <div className="weekday">Thu</div>
        <div className="weekday">Fri</div>
        <div className="weekday">Sat</div>
      </div>
      <div className="calendar-days">
        {days}
      </div>
      <div className="selected-day">
        {selectedDay ? `Selected day: ${selectedDay}, ${months[currentMonth]} ${currentYear}` : 'No day selected'}
      </div>
    </div>
  );
}

export default Calendar;

And the complete code for src/Calendar.css:

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-header button {
  background-color: #f0f0f0;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

.calendar-header button:hover {
  background-color: #ddd;
}

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

.day {
  border: 1px solid #eee;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
}

.day:hover {
  background-color: #f0f0f0;
}

.empty {
  border: none;
  background-color: transparent;
  cursor: default;
}

.current-day {
  background-color: #b3d9ff;
  font-weight: bold;
}

.selected-day {
  margin-top: 10px;
  font-style: italic;
}

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

.weekday {
  text-align: center;
  font-weight: bold;
  padding: 5px;
}

This tutorial has provided a solid foundation for building a dynamic calendar component in React. Remember, the journey of web development is one of continuous learning. Experiment with different features, explore advanced styling techniques, and always strive to improve your code. With each project, you will deepen your understanding of React and the art of building user interfaces.

More posts