Build a Dynamic React JS Interactive Simple Interactive Calendar

Written by

javascriptfundamentals

in

In the world of web development, interactive calendars are a common and essential component for a wide array of applications. From scheduling appointments and managing events to displaying deadlines and tracking progress, calendars provide a user-friendly way to visualize and interact with time-based data. As a software engineer, you’ll likely encounter the need to build a calendar at some point. This tutorial will guide you through creating a dynamic, interactive calendar using React JS, a popular JavaScript library for building user interfaces. We’ll focus on simplicity and clarity, making it easy for beginners to follow along and learn the fundamentals of React while building a practical and useful component.

Why Build a Calendar with React?

React’s component-based architecture makes it ideal for building complex UI elements like calendars. Here’s why React is a great choice:

  • Component Reusability: React allows you to break down your calendar into reusable components (e.g., a single day, a week view, a month view). This promotes code organization and reduces redundancy.
  • Efficient Updates: React’s virtual DOM efficiently updates only the parts of the calendar that have changed, leading to a smooth user experience.
  • State Management: React’s state management capabilities make it easy to handle user interactions and dynamic updates within the calendar.
  • Large Community and Ecosystem: React has a vast community and a wealth of libraries and resources that can help you extend your calendar’s functionality (e.g., date formatting, event handling).

Project Setup

Before we start coding, let’s set up our React project. You’ll need Node.js and npm (or yarn) installed on your machine. Open your terminal and run the following commands:

npx create-react-app interactive-calendar
cd interactive-calendar

This will create a new React app named “interactive-calendar”. Now, open the project in your code editor. We’ll be working primarily in the `src` directory.

Calendar Structure and Core Components

Our calendar will have a basic structure, including a month view and the ability to navigate between months. We’ll start by creating the following components:

  • Calendar.js: The main component that orchestrates the calendar’s overall structure and state.
  • Month.js: Renders a single month’s view, including the days of the week and the dates.
  • Day.js: Renders a single day cell within the month view.

Calendar.js

This component will manage the current month and year and handle navigation (e.g., going to the next or previous month). Replace the contents of `src/App.js` with the following code:

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

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"
  ];

  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);
    }
  };

  return (
    <div>
      <div>
        <button><</button>
        <span>{months[currentMonth]} {currentYear}</span>
        <button>></button>
      </div>
      
    </div>
  );
}

export default Calendar;

Here’s what this code does:

  • It imports the necessary modules.
  • It initializes the state variables `currentMonth` and `currentYear` using the `useState` hook. These variables track the month and year currently displayed.
  • It defines an array of month names for display.
  • It defines functions `goToPreviousMonth` and `goToNextMonth` to handle navigation between months. These functions update the `currentMonth` and `currentYear` state variables accordingly.
  • It renders the calendar header with navigation buttons and the current month and year.
  • It renders the `Month` component, passing the `currentMonth` and `currentYear` as props.

Month.js

This component will be responsible for rendering the days of the month. Create a new file named `src/Month.js` and add the following code:

import React from 'react';
import Day from './Day';

function Month({ month, year }) {
  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 (Sunday) to 6 (Saturday)

  const days = [];
  for (let i = 0; i < startingDayOfWeek; i++) {
    days.push(<div></div>);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    days.push();
  }

  return (
    <div>
      <div>
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
      </div>
      <div>
        {days}
      </div>
    </div>
  );
}

export default Month;

Here’s a breakdown of the `Month.js` component:

  • It calculates the first and last days of the month, the number of days in the month, and the starting day of the week.
  • It creates an array of empty day cells at the beginning of the month to account for the days before the first day of the month.
  • It iterates through the days of the month and creates a `Day` component for each day, passing the day number, month, and year as props.
  • It renders a container with the weekdays labels and the day elements.

Day.js

This component will render a single day. Create a new file named `src/Day.js` and add the following code:

import React from 'react';

function Day({ day, month, year }) {
  return (
    <div>
      {day}
    </div>
  );
}

export default Day;

This is the simplest component; it only displays the day number.

Styling the Calendar

To make the calendar visually appealing, let’s add some CSS. Create a new file named `src/Calendar.css` and add the following styles:

.calendar {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  font-family: sans-serif;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

.month {
  padding: 10px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.day {
  padding: 5px;
  border: 1px solid #eee;
  cursor: pointer;
}

.day.empty {
  border: none;
}

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

Import the CSS file into `src/App.js` by adding the following line at the top of the file:

import './Calendar.css';

Now, modify `src/index.js` to render the `Calendar` component. Replace the contents with the following:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Calendar from './Calendar';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

Finally, open `src/index.css` and add the following to remove default styling:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Run your React app with `npm start` in your terminal. You should see a basic calendar with the current month and year, and you should be able to navigate between months using the navigation buttons.

Adding Interactivity: Highlighting Selected Days

Let’s add some interactivity to our calendar. We’ll allow users to select a day, and the selected day will be highlighted. We’ll add the following:

  • A state variable to keep track of the selected day.
  • An event handler for the day cells to update the selected day.
  • Conditional styling to highlight the selected day.

Updating Calendar.js

First, modify the `Calendar.js` file to include the selected day state. Add a state variable and pass it to the `Month` component:

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

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);
    }
  };

  return (
    <div>
      <div>
        <button><</button>
        <span>{months[currentMonth]} {currentYear}</span>
        <button>></button>
      </div>
      
    </div>
  );
}

export default Calendar;

We’ve added `selectedDay` and `setSelectedDay` to the `Calendar` component’s state and passed them as props to the `Month` component. Now, let’s update the `Month` and `Day` components to use these props.

Updating Month.js

Modify `Month.js` to pass the `selectedDay` and `setSelectedDay` props to the `Day` component:

import React from 'react';
import Day from './Day';

function Month({ month, year, selectedDay, setSelectedDay }) {
  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 (Sunday) to 6 (Saturday)

  const days = [];
  for (let i = 0; i < startingDayOfWeek; i++) {
    days.push(<div></div>);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    days.push();
  }

  return (
    <div>
      <div>
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
      </div>
      <div>
        {days}
      </div>
    </div>
  );
}

export default Month;

Updating Day.js

Finally, update the `Day.js` component to handle the click event and highlight the selected day. Add an `onClick` handler and conditional styling:

import React from 'react';

function Day({ day, month, year, selectedDay, setSelectedDay }) {
  const isSelected = selectedDay === day;

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

  return (
    <div>
      {day}
    </div>
  );
}

export default Day;

Also, add the following CSS to `Calendar.css` to style the selected day:

.day.selected {
  background-color: #b0e2ff;
  font-weight: bold;
}

Now, when you click on a day in the calendar, it should highlight, and clicking another day should change the highlight.

Adding Event Data (Placeholder)

To make the calendar truly useful, you’ll likely want to display events on specific dates. While we won’t implement a full-fledged event management system here, we’ll show you how to incorporate event data into the calendar. We will use a simple object to simulate event data.

First, let’s create some sample event data. Add this to the `Calendar.js` component:

// Inside Calendar component, before the return statement
const events = {
  '2024-11-15': [{ title: 'Meeting with Client', description: 'Discuss project progress' }],
  '2024-11-20': [{ title: 'Team Lunch', description: 'Celebrate Q3 achievements' }],
  // Add more events as needed
};

This `events` object uses dates as keys and an array of event objects as values. Modify the `Month.js` component to pass the events to the `Day` component:

import React from 'react';
import Day from './Day';

function Month({ month, year, selectedDay, setSelectedDay, events }) {
  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 (Sunday) to 6 (Saturday)

  const days = [];
  for (let i = 0; i < startingDayOfWeek; i++) {
    days.push(<div></div>);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    days.push();
  }

  return (
    <div>
      <div>
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
      </div>
      <div>
        {days}
      </div>
    </div>
  );
}

export default Month;

Modify the `Calendar.js` component to pass the events data to the `Month` component:

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

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 events = {
    '2024-11-15': [{ title: 'Meeting with Client', description: 'Discuss project progress' }],
    '2024-11-20': [{ title: 'Team Lunch', description: 'Celebrate Q3 achievements' }],
  };

  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);
    }
  };

  return (
    <div>
      <div>
        <button><</button>
        <span>{months[currentMonth]} {currentYear}</span>
        <button>></button>
      </div>
      
    </div>
  );
}

export default Calendar;

Finally, update the `Day.js` component to display a dot if there is an event on that day. Add the following code in the `Day.js` component:

import React from 'react';

function Day({ day, month, year, selectedDay, setSelectedDay, events }) {
  const isSelected = selectedDay === day;
  const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
  const hasEvent = events && events[dateString] && events[dateString].length > 0;

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

  return (
    <div>
      {day}
      {hasEvent && <div></div>}
    </div>
  );
}

export default Day;

Add the following CSS to `Calendar.css`:

.event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
  margin-left: 5px;
  display: inline-block;
}

Now, days with events should display a red dot. Remember, this is a simplified implementation. In a real-world application, you would fetch event data from a backend and display more detailed event information.

Common Mistakes and How to Fix Them

When building a React calendar, you might encounter some common issues. Here’s a look at some of them and how to resolve them:

  • Incorrect Date Calculations: Ensure your date calculations are accurate, especially when handling different months and leap years. Double-check your logic when calculating the number of days in a month or the first day of the week.
  • State Management Errors: Be careful when updating state. Incorrectly updating state can lead to unexpected behavior or UI updates. Always use the `useState` hook correctly and ensure your state updates are immutable.
  • CSS Styling Issues: CSS can sometimes be tricky. Make sure your styles are applied correctly, and pay attention to specificity. Use your browser’s developer tools to inspect the elements and see if your styles are being overridden.
  • Performance Problems: For large calendars with many events, consider optimizing your component rendering. Use techniques like memoization (`React.memo`) or virtualized lists to improve performance.
  • Prop Drilling: As you pass props down through multiple levels of components, it can become cumbersome. Consider using Context or a state management library (like Redux or Zustand) for more complex applications.

Key Takeaways and Best Practices

  • Component-Based Design: Break down your UI into reusable components. This makes your code more organized and easier to maintain.
  • State Management: Use React’s state management capabilities (`useState`, `useReducer`) to handle user interactions and dynamic updates.
  • CSS Styling: Use CSS effectively to style your calendar. Consider using CSS-in-JS libraries or a CSS preprocessor (like Sass) for more advanced styling.
  • Event Handling: Implement event handling to allow users to interact with the calendar.
  • Performance Optimization: Optimize your calendar for performance, especially when dealing with large datasets or complex features.
  • Accessibility: Ensure your calendar is accessible to all users. Use semantic HTML and ARIA attributes to make it screen reader-friendly.

FAQ

Here are some frequently asked questions about building a React calendar:

  1. Can I use a third-party library for the calendar?

    Yes, there are many excellent React calendar libraries available, such as React Big Calendar, react-calendar, and others. These libraries can save you time and effort, especially if you need advanced features.

  2. How can I handle time zones?

    Handling time zones can be complex. You can use libraries like Moment.js or date-fns, along with the `Intl` API, to handle time zone conversions and formatting.

  3. How do I add recurring events?

    Implementing recurring events involves more complex logic. You’ll need to store recurrence rules (e.g., every day, every week, every month) and generate event instances based on those rules. Consider using a library that supports recurring events.

  4. How can I save and load event data?

    You’ll typically store event data in a database on a backend server. Your React application would communicate with the backend using API calls (e.g., using `fetch` or Axios) to save and load event data.

  5. How do I make the calendar responsive?

    Use responsive CSS techniques (e.g., media queries, flexbox, grid) to ensure your calendar looks good on different screen sizes.

Creating a functional and visually appealing calendar application in React can seem daunting at first, but by breaking the project down into manageable components and carefully considering the user experience, it becomes much more accessible. This guide has provided you with a solid foundation. You can build upon this foundation to create a feature-rich, interactive calendar tailored to your specific needs. From here, you can explore more advanced features like event editing, drag-and-drop functionality, and integration with external APIs. Remember to continuously test and refine your code. Embrace the iterative process of development, and don’t be afraid to experiment. The skills and knowledge gained from building such a component will undoubtedly serve you well in your journey as a software engineer.

More posts