How to Setup React Calendar Component?

A calendar component is crucial for web apps, allowing users to select dates, manage schedules, and track events easily. In React, building a calendar becomes even more efficient due to its component-based structure and rich set of libraries.

In this blog, we’ll dive into various libraries that make the set up and customization of the calendar react easy. We’ll cover different use cases and features that you can use when adding React calendars to your site. Plus, we’ll also learn how ReactJS development experts set up and customize calendar components. So, with that said. Let’s start!

How to Set Up a React Calendar?

Setting up a React Calendar involves several steps, from creating a new React project to installing and customizing the calendar component. Here’s a stepwise process to help you get started:

Step 1: Install a React Calendar Library

The first step in setting up a React Calendar is choosing and installing a suitable library. In this example, we will use react-calendar, which is a simple and lightweight library.

First ensure you have Node.js and npm installed in your development environment. Then, create a new React app using create-react-app, if you don’t already have one:

npx create-react-app my-calendar-app

Once done, navigate into your app’s directory:

cd my-calendar-app

After that, install the react-calendar library:

npm install react-calendar

With that, we have created a new project and installed the react-calendar library.

Step 2: Basic Setup of React Calendar Component

Once installed, you can integrate the calendar into your application. Open your App.js file and import the Calendar component from the react-calendar library. Here is the code:

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css'; // Import the styles

Then, set up a state to manage the selected date:

const [value, setValue] = useState(new Date());

Now, add the Calendar component and pass the state to the value and onChange props:

function App() {
  return (
    <div>
      <h1>React Calendar</h1>
      <Calendar
        onChange={setValue}
        value={value}
      />
      <p>Selected date: {value.toDateString()}</p>
    </div>
  );
}
export default App;

This basic setup will render a working React calendar that allows users to select a date.

Step 3: Customize the Calendar Appearance

You can further customize the appearance of the calendar using various props that react-calendar provides, such as changing views, disabling specific dates, or formatting.

To change default View (e.g., showing the year view first) you can use the code:

<Calendar
  onChange={setValue}
  value={value}
  defaultView="year"  // You can use "month", "decade", etc.
/>

To disable specific dates like weekends or holidays, you can use the tileDisabled prop:

<Calendar
  onChange={setValue}
  value={value}
  tileDisabled={({ date }) => date.getDay() === 0 || date.getDay() === 6}  // Disable Sundays and Saturdays
/>

Step 4: Handling Events and State Management

You can extend the functionality of the calendar by handling events, such as storing the selected dates in your state or integrating it with an external API.

For example, to handle date changes you can add additional logic in the onChange event to handle the selected date or perform actions like making API calls:

function handleDateChange(date) {
  setValue(date);
  console.log('Selected date:', date);
  // Add logic to fetch or save data
}

<Calendar
  onChange={handleDateChange}
  value={value}
/>

If you need the user to select a date range instead of a single date, you can modify the Calendar component accordingly:

<Calendar
  onChange={setValue}
  value={value}
  selectRange={true}  // Enable range selection
/>

Step 5: Styling the Calendar

You can customize the look and feel of the calendar by adding your custom CSS or modifying the default styles. By default, react-calendar comes with some basic styles, but you can override them as needed. Here is how you can add custom styles by modifying the Calendar.css file or adding styles directly to your component.

.react-calendar {
  border: 1px solid #a0a096;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.react-calendar__tile--active {
  background-color: #28a745;
  color: white;
}

Step 6: Integrating with External Data

If you need to integrate your calendar with external data, such as displaying events from a backend API, you can fetch data and update the calendar. Here is how you can use useEffect to fetch data and update state:

useEffect(() => {
  // Simulating a fetch call to get events
  fetch('/api/events')
    .then(response => response.json())
    .then(data => {
      setEvents(data);  // Assuming 'data' contains an array of events
    });
}, []);

To display event dates on the calendar by highlighting or marking specific tiles use the code:

<Calendar
  onChange={setValue}
  value={value}
  tileClassName={({ date }) => events.find(event => event.date === date.toDateString()) ? 'highlight' : null}
/>

Step 7: Run the Website

Once you have created, customized, and added the required functionality start the React site using the following command:

npm start

After running the above command, visit http://localhost:3000 in your browser to see the calendar in action. You should see a calendar component with the customizations you have made.

With that, we have created a website with a customized calendar component. If you are looking to create a website with interactive and customized features, consider getting assistance from our ReactJS development company.

Key Features of a React Calendar

Let’s look at a few key features of React Calendar.

• Date Selection: Allows users to select specific dates for various purposes (e.g., appointments, events).
• Date Display: Provides a visual representation of the calendar, often including a grid of days, weeks, or months.
• Customization: Enables customization of the calendar’s appearance, such as themes, colors, and locales.
• Event Handling: They provide mechanisms for handling user interactions, such as date selection or clicking on events.
• Integration with External Data: They can be integrated with external data sources (e.g., databases, APIs) to display events or other information.
• Time Zone Support: React Calendars can support multiple time zones, allowing users to view events in their local time or a specified time zone. This feature is valuable for websites used by a global audience.

These features make React Calendars powerful tools for managing and displaying dates effectively across a wide range of use cases. Now, let’s dive into the use case of React Calendar leveraged by professional ReactJS developers.

Best React Calendar Libraries

There are several popular React calendar libraries that you can use to add calendar functionality to your React applications. Here are some of the most widely used ones:

react-calendar

react-calendar is a lightweight and easy-to-use calendar component for React websites. It provides a flexible date picker solution with multiple customization options. That makes it ideal for simple date selection tasks.

Key Features:

• Supports single date, multiple dates, and date ranges.
• Customizable views (month, year, decade).
• Localized and supports different date formats.
• Easy integration with various event handlers.
• Mobile-friendly with responsive design.

Use the following command to install “react-calendar”:

npm install react-calendar

Use Case: Ideal for basic date-picking needs in forms, booking systems, and dashboards that don’t require advanced event handling or scheduling. Its simple API and customizable features make it suitable for small- to medium-scale projects.

react-big-calendar

react-big-calendar is a robust calendar component designed for complex scheduling systems. It is built on top of the popular moment.js library, providing powerful features like multiple views and event management.

Key Features:

• Supports multiple views (day, week, month, agenda).
• Drag-and-drop functionality for events using react-dnd.
• Integration with Google Calendar.
• Highly customizable through props and CSS.
• Handles recurring and overlapping events.

Use the following command to install “react-big-calendar”:

npm install react-big-calendar

Use Case: Best for event management applications, project management tools, and scheduling dashboards requiring complex event handling and user interaction.

fullcalendar

fullcalendar is a powerful, full-featured library for displaying calendars in a React app. It supports a range of views, including customizable event displays and drag-and-drop event management. That makes it ideal for large-scale calendar systems.

Key Features:

• Multiple views (day, week, month, agenda).
• Drag-and-drop event handling.
• Supports recurring events and resource scheduling.
• Time zone management and internationalization support.
• API integration with Google Calendar and external data sources.

Use the following command to install “fullcalendar”:

npm install @fullcalendar/react @fullcalendar/core

Use Case: Popular in complex applications that need advanced scheduling capabilities, such as event management platforms and large-scale booking systems.

react-datepicker

react-datepicker is a lightweight and user-friendly date picker component that allows users to select dates, times, and ranges with ease. It focuses more on date selection rather than displaying full calendar views, making it an excellent choice for form inputs.

Key Features:

• Supports date, time, and range selection.
• Customizable through CSS and props.
• Localization support for various date formats.
• Disabled dates and custom date formats.
• Integrates easily into forms with React.

Use the following command to install “react-datepicker”:

npm install react-datepicker

Use Case: Best for date input fields in forms, such as booking or scheduling forms where the user needs to select one or multiple dates. It’s often used in websites where only date input is required, without the need for full calendar views.

react-calendar-timeline

react-calendar-timeline is a flexible timeline component for displaying and managing events in a horizontal timeline format. It is particularly useful for visualizing time-bound data over extended periods, such as schedules, project timelines, or task management systems.

Key Features:

• Horizontal timeline with zoom in/out functionality.
• Drag-and-drop event management.
• Customizable time intervals (hours, days, weeks, months).
• Multiple item groups with row expansion and contraction.
• Time range navigation.

Use the following command to install “react-calendar-timeline”:

npm install react-calendar-timeline

Use Case: Best for project management tools, Gantt charts, or time-based visualization of data. It helps track progress, deadlines, and assignments over time, providing a clear overview of time-related events.

These libraries offer a wide range of features, from simple date pickers to complex event management tools. Now that we know the popular libraries, let’s learn how to set up calendar components in React.

Common Use Cases of React Calendar

React Calendars are versatile components widely used across many industries to manage dates, events, and scheduling. Below are some of the most common applications:

Scheduling and Appointment Systems

React Calendar is utilized in scheduling applications that enable users to book appointments for services like medical consultations or making reservations. With its intuitive interface, users can easily navigate through available time slots and manage their bookings. That ensures a smooth scheduling experience for users.

Event Management Systems

Applications for managing events, such as conferences, workshops, or parties, often use a React Calendar to display event details. Events can be scheduled, updated, or canceled, with views that allow users to see events across days, weeks, or months. Plus, you can set recurring events easily.

Task or To-Do List Management

Integrating React Calendar into task management applications enhances the user experience by allowing individuals to visualize their daily activities. Users can assign specific tasks to dates, helping them prioritize their workload and track progress. This can help users improve overall productivity and meet their deadlines on time.

Booking Systems

Booking systems for hotels, travel, or restaurant table reservations benefit greatly from React Calendars. Users can select their desired dates, check for availability, and make reservations directly through the calendar. This simplifies the booking process and reduces the chance of double bookings.

Education and School Management Systems

Educational institutions often leverage the React Calendar to manage academic schedules, class timetables, and examination dates. Students and educators can easily track their schedules, monitor upcoming assignments, and stay informed about academic events, fostering a more organized learning environment.

These use cases showcase the versatility and effectiveness of React Calendars across various sectors. They not only manage time-based information easily but also enhance the user experience. Now, before jumping to how we can set up, let’s dive into the popular calendar libraries used by expert React developers.

FAQs About Using React Calendar

Wrapping Up

Adding a calendar component to your React website makes it easier to manage dates, events, and schedules. They enhance the user experience and offer them simple functionality that’s valuable for most sites. You can add the calendar component in React using various libraries like react-calendar and react-datepicker.

To start with the calendar setup process, first install the required libraries and then customize their style as required. You can further customize the React calendar component by adding functionality like event handling. Plus, you can also integrate calendar components with external APIs.

If you are looking to build an interactive and customized site with enhanced user experience, hire ReactJS developers.