Build A Simple Next.js Interactive Event Calendar App

In today’s fast-paced digital world, managing and visualizing events efficiently is crucial. Whether you’re a small business owner, a community organizer, or a developer looking to hone your skills, a well-designed event calendar can be an invaluable tool. This article will guide you through building a simple, yet functional, interactive event calendar application using Next.js, a powerful React framework known for its server-side rendering and static site generation capabilities. We’ll break down the process step-by-step, explaining concepts in plain language, providing real-world examples, and highlighting common pitfalls to avoid.

Why Build an Event Calendar with Next.js?

Next.js offers several advantages for this type of project:

Performance: Server-side rendering (SSR) and static site generation (SSG) improve initial load times and SEO.
Developer Experience: Features like built-in routing, API routes, and image optimization streamline development.
Scalability: Next.js applications are easy to scale, making them suitable for projects of any size.
React Ecosystem: Leverage the vast React ecosystem for UI components, state management, and more.

By the end of this tutorial, you’ll have a working event calendar that you can customize and expand upon. This project is perfect for beginners and intermediate developers looking to deepen their understanding of Next.js and React.

Project Setup and Prerequisites

Before we dive into the code, let’s make sure you have everything you need:

Node.js and npm (or yarn): Make sure you have Node.js and npm (or yarn) installed on your system. You can download them from nodejs.org.
A Code Editor: Choose your favorite code editor (VS Code, Sublime Text, Atom, etc.).
Basic JavaScript/React Knowledge: Familiarity with JavaScript and React fundamentals will be helpful.

Now, let’s create a new Next.js project:

npx create-next-app event-calendar-app
cd event-calendar-app

This command sets up a new Next.js project named “event-calendar-app”. Navigate into the project directory using `cd event-calendar-app`.

Project Structure and Core Components

Let’s take a look at the basic structure of our project. We’ll be focusing on a few key components:

`pages/index.js`: This is the main page of our application, where we’ll display the calendar.
`components/EventCalendar.js`: This component will handle the calendar’s logic and rendering.
`components/EventList.js`: (Optional, but recommended) This component can be used to display a list of events for the selected day.
`styles/globals.css`: (Optional) For basic styling.

Step-by-Step Implementation

1. Setting up the Event Calendar Component (`components/EventCalendar.js`)

Create a new file named `EventCalendar.js` inside the `components` directory. This is where the core calendar logic will reside. For now, let’s start with a basic structure:

import React, { useState } from 'react';

function EventCalendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date());

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

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

  return (
    <div>
      <div>
        <button onClick={prevMonth}>Previous</button>
        <span>{currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
        <button onClick={nextMonth}>Next</button>
      </div>
      <div>
        {/* Calendar grid will go here */}
      </div>
    </div>
  );
}

export default EventCalendar;

This code does the following:

Imports `useState`: This React hook manages the current month displayed on the calendar.
`currentMonth` state: Initializes the `currentMonth` state with the current date.
`nextMonth` and `prevMonth` functions: These functions update the `currentMonth` state when the user clicks the “Next” or “Previous” buttons.
Basic UI: Displays buttons for navigating months and the current month’s name.

2. Rendering the Calendar Grid

Inside the `EventCalendar` component, we’ll need to generate the calendar grid. This involves calculating the days of the month, the first day of the week, and rendering the calendar cells. Let’s add the following code within the `<div>` where the comment `/* Calendar grid will go here */` is placed:


  const firstDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
  const lastDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 (Sunday) to 6 (Saturday)

  const weeks = [];
  let days = [];

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

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

  // Split the days into weeks
  for (let i = 0; i < Math.ceil(days.length / 7); i++) {
    weeks.push(
      <div key={i} className="week">
        {days.slice(i * 7, i * 7 + 7)}
      </div>
    );
  }

  return (
    <div>
      <div>
        <button onClick={prevMonth}>Previous</button>
        <span>{currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
        <button onClick={nextMonth}>Next</button>
      </div>
      <div className="calendar-grid">
        {weeks}
      </div>
    </div>
  );

This code does the following:

Calculates Date Information: It determines the first and last days of the month, the total number of days, and the starting day of the week.
Generates Empty Cells: It creates empty `<div>` elements for the days before the first day of the month to align the calendar grid correctly.
Generates Day Cells: It iterates through the days of the month and creates `<div>` elements for each day.
Organizes into Weeks: It groups the day cells into weeks (arrays of 7 days).
Renders the Grid: Finally, it renders the weeks within a `<div>` with a `calendar-grid` class.

3. Styling the Calendar (Optional but Recommended)

To make the calendar visually appealing, let’s add some basic styling. Open `styles/globals.css` and add the following CSS:


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

.day {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.day.empty {
  border: none;
  background-color: #f0f0f0;
  cursor: default;
}

This CSS sets up the grid layout and styles the day cells. Feel free to customize the styles to your liking.

4. Integrating the Calendar into the Main Page (`pages/index.js`)

Now, let’s integrate the `EventCalendar` component into our main page (`pages/index.js`). Replace the content of `pages/index.js` with the following:

import EventCalendar from '../components/EventCalendar';

function HomePage() {
  return (
    <div>
      <h2>Event Calendar</h2>
      <EventCalendar />
    </div>
  );
}

export default HomePage;

This imports the `EventCalendar` component and renders it on the page.

5. Running the Application

To run your application, open your terminal, navigate to the project directory, and run the following command:

npm run dev

yarn dev

This will start the development server. Open your browser and go to `http://localhost:3000` to see your event calendar.

Adding Event Data and Interactivity

1. Storing Event Data

To make the calendar useful, we need to store event data. For this example, we’ll use a simple JavaScript array to represent our events. In a real-world application, you would likely fetch this data from a database or an API.

Let’s add an `events` array to the `EventCalendar` component. This array will hold event objects, each with a `date` and a `title` property. Add the following code to the top of your `EventCalendar` component, before the `return` statement:


  const [events, setEvents] = useState([
    {
      date: new Date(2024, 4, 15), // May 15, 2024
      title: 'Meeting with Client',
    },
    {
      date: new Date(2024, 4, 20),
      title: 'Team Lunch',
    },
  ]);

This initializes an `events` state variable with some sample events.

2. Displaying Events on the Calendar

Now, we need to display these events on the calendar. We’ll modify the `day` cells to show a dot or indicator if an event exists on that day.

Inside the loop that generates the day cells, add the following code inside the `<div>` with the class “day”:


    {i}
    {events.some(
      (event) =>
        event.date.getFullYear() === currentMonth.getFullYear() &&
        event.date.getMonth() === currentMonth.getMonth() &&
        event.date.getDate() === i
    ) && <div className="event-indicator"></div>}

This code checks if any event’s date matches the current day. If a match is found, it renders a small `<div>` with the class “event-indicator”. Make sure to add the following CSS to your `globals.css` file:


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

3. Adding Day Selection and Event Details

Let’s add the functionality to select a day and display event details for that day (using a component called `EventList`).

First, add a `selectedDate` state variable to the `EventCalendar` component:


  const [selectedDate, setSelectedDate] = useState(null);

Next, modify the `day` cell’s `onClick` handler to update the `selectedDate`:


    <div
      key={i}
      className="day"
      onClick={() => setSelectedDate(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i))}
    >
      {i}
      {events.some(
        (event) =>
          event.date.getFullYear() === currentMonth.getFullYear() &&
          event.date.getMonth() === currentMonth.getMonth() &&
          event.date.getDate() === i
      ) && <div className="event-indicator"></div>}
    </div>

Now, create a new component `EventList.js` in the `components` directory. This will display the events for the selected day:


import React from 'react';

function EventList({ selectedDate, events }) {
  if (!selectedDate) {
    return <div>Select a day to view events.</div>;
  }

  const selectedEvents = events.filter(
    (event) =>
      event.date.getFullYear() === selectedDate.getFullYear() &&
      event.date.getMonth() === selectedDate.getMonth() &&
      event.date.getDate() === selectedDate.getDate()
  );

  return (
    <div>
      <h3>Events for {selectedDate.toLocaleDateString()}</h3>
      {selectedEvents.length === 0 ? (
        <p>No events for this day.</p>
      ) : (
        <ul>
          {selectedEvents.map((event) => (
            <li key={event.title}>{event.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default EventList;

Finally, import and render the `EventList` component in `EventCalendar.js`:


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

function EventCalendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(null);
  const [events, setEvents] = useState([
    {
      date: new Date(2024, 4, 15), // May 15, 2024
      title: 'Meeting with Client',
    },
    {
      date: new Date(2024, 4, 20),
      title: 'Team Lunch',
    },
  ]);

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

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

  const firstDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
  const lastDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 (Sunday) to 6 (Saturday)

  const weeks = [];
  let days = [];

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

  for (let i = 1; i <= daysInMonth; i++) {
    days.push(
      <div
        key={i}
        className="day"
        onClick={() => setSelectedDate(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i))}
      >
        {i}
        {events.some(
          (event) =>
            event.date.getFullYear() === currentMonth.getFullYear() &&
            event.date.getMonth() === currentMonth.getMonth() &&
            event.date.getDate() === i
        ) && <div className="event-indicator"></div>}
      </div>
    );
  }

  // Split the days into weeks
  for (let i = 0; i < Math.ceil(days.length / 7); i++) {
    weeks.push(
      <div key={i} className="week">
        {days.slice(i * 7, i * 7 + 7)}
      </div>
    );
  }

  return (
    <div>
      <div>
        <button onClick={prevMonth}>Previous</button>
        <span>{currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
        <button onClick={nextMonth}>Next</button>
      </div>
      <div className="calendar-grid">
        {weeks}
      </div>
      <EventList selectedDate={selectedDate} events={events} />
    </div>
  );
}

export default EventCalendar;

This code:

Imports the `EventList` component.
Passes the `selectedDate` and `events` as props to `EventList`.
Renders the `EventList` component below the calendar grid.

Now, when you click on a day, the events for that day will be displayed below the calendar. If no day is selected, a message will prompt the user to select a day. This completes the basic functionality of your calendar.

Common Mistakes and How to Fix Them

Building a Next.js event calendar can be straightforward, but there are a few common mistakes that developers often encounter. Here’s a breakdown of these pitfalls and how to resolve them:

1. Incorrect Date Calculations

Mistake: Off-by-one errors when calculating the days in a month, or the starting day of the week. This can lead to incorrect calendar grid rendering.

Fix:

Double-check the logic: Carefully review your date calculations, especially when using `new Date()`.
Use the correct methods: Make sure you’re using the correct JavaScript date methods (e.g., `getDate()`, `getDay()`, `getMonth()`, `getFullYear()`).
Test thoroughly: Test your calendar with different months and years to ensure accuracy. Pay close attention to edge cases like February (leap years) and months with different numbers of days.

2. Incorrect Event Data Handling

Mistake: Issues with how event data is stored, fetched, or displayed. This can lead to events not showing up correctly or data not being updated properly.

Fix:

Data Format: Ensure that your event data is in a consistent format (e.g., an array of objects with `date` and `title` properties).
Date Object: Make sure the `date` property in your event data is a JavaScript `Date` object, not a string.
State Management: Use React’s `useState` hook correctly to manage event data. When updating the event data, use the correct setter function (e.g., `setEvents`).
Data Fetching: If you’re fetching events from an API, ensure you’re handling the asynchronous nature of the fetch operation correctly (e.g., using `async/await` or `.then()` and `.catch()`).

3. CSS Styling Issues

Mistake: Problems with CSS styling, such as the calendar grid not rendering correctly, or the styling not being applied.

Fix:

CSS Import: Make sure you’ve imported the CSS file correctly in your component or in `_app.js`.
Specificity: Be aware of CSS specificity. If your styles are not being applied, you might need to adjust the CSS selectors or use more specific selectors.
Inspect with DevTools: Use your browser’s developer tools to inspect the elements and see which styles are being applied and if there are any conflicts.
Grid Layout: Double-check your `grid-template-columns` and other grid properties to ensure the calendar grid renders correctly.

4. Performance Issues

Mistake: Poor performance, especially with a large number of events. This can lead to slow loading times and a sluggish user experience.

Fix:

Optimize Data: If you’re fetching event data from an API, optimize the API calls to retrieve only the data needed for the current month.
Use Memoization: Use `React.memo` or `useMemo` to memoize components or calculations that don’t need to re-render frequently. This can significantly improve performance, especially when dealing with a large number of events.
Virtualization: If you’re displaying a very long list of events, consider using a virtualization library (e.g., `react-window`) to only render the visible events.
Image Optimization: If your events include images, optimize the images to reduce file sizes. Next.js provides built-in image optimization capabilities.

5. Accessibility Issues

Mistake: Failing to make the calendar accessible to users with disabilities.

Fix:

Semantic HTML: Use semantic HTML elements (e.g., `<header>`, `<nav>`, `<main>`, `<article>`) to structure your content.
ARIA Attributes: Use ARIA attributes (e.g., `aria-label`, `aria-describedby`) to provide additional information to screen readers.
Keyboard Navigation: Ensure that the calendar is navigable using the keyboard. Provide focus states for interactive elements.
Color Contrast: Ensure sufficient color contrast between text and background elements to make the content readable.
Testing with Screen Readers: Test your calendar with a screen reader to ensure it’s accessible.

Advanced Features and Enhancements

Once you have a working event calendar, you can enhance it with a variety of advanced features:

Event Creation and Editing: Add functionality for users to create, edit, and delete events directly within the calendar. This would typically involve adding forms and handling user input.
Database Integration: Connect your calendar to a database (e.g., PostgreSQL, MongoDB) to store event data persistently. This will allow you to save events even when the user closes the browser.
Authentication: Implement user authentication to restrict access to the calendar or to allow different users to manage their own events.
Recurring Events: Add support for recurring events (e.g., weekly meetings, monthly deadlines). This would involve handling complex date calculations.
Filtering and Search: Allow users to filter events by category, keyword, or date range.
Integration with External APIs: Integrate with external APIs (e.g., Google Calendar, iCalendar) to import or export event data.
Responsive Design: Ensure the calendar is responsive and looks good on all devices (desktops, tablets, and mobile phones).
Drag-and-Drop Functionality: Allow users to drag and drop events to reschedule them.
Notifications and Reminders: Implement notifications and reminders to alert users about upcoming events.

Key Takeaways

Building a Next.js event calendar is a great way to learn and apply your web development skills. By following the steps outlined in this tutorial, you’ve created a functional and interactive calendar application. You’ve also learned about the core concepts of Next.js, including components, state management, and basic styling. Remember to practice, experiment, and build upon this foundation. The world of web development is constantly evolving, so continuous learning and experimentation are key to staying ahead. From here, the possibilities are endless; you can tailor your calendar to fit any specific needs, from simple personal organizers to complex business applications. Embrace the learning process and enjoy the journey of building your own dynamic and useful web applications.

Build a Simple Next.js Interactive Event Calendar App

Why Build an Event Calendar with Next.js?

Project Setup and Prerequisites

Project Structure and Core Components

Step-by-Step Implementation

1. Setting up the Event Calendar Component (`components/EventCalendar.js`)

2. Rendering the Calendar Grid

3. Styling the Calendar (Optional but Recommended)

4. Integrating the Calendar into the Main Page (`pages/index.js`)

5. Running the Application

Adding Event Data and Interactivity

1. Storing Event Data

2. Displaying Events on the Calendar

3. Adding Day Selection and Event Details

Common Mistakes and How to Fix Them

1. Incorrect Date Calculations

2. Incorrect Event Data Handling

3. CSS Styling Issues

4. Performance Issues

5. Accessibility Issues

Advanced Features and Enhancements

Key Takeaways

More posts

Build a Simple Next.js Interactive Survey App: A Beginner’s Guide

Build a Simple Next.js Interactive Code Snippet Sharing App

Build a Simple Next.js Interactive File Uploader App

Build a Simple Next.js Interactive Credit Card Validator