Create a Simple Calendar in React with React-Calendar

What is React-Calendar?

React-Calendar is a powerful calendar library that allows users to pick days, months, years, or even decades. It supports date range selection and multiple languages, making it a versatile tool for various applications. Plus, it’s not dependent on moment.js, giving you more flexibility.

Getting Started with React-Calendar

To create a new React project, ensure you have Node.js ≥v10.16 and npm ≥v5.6 installed. Then, run the following command:

npx create-react-app my-app

Next, add the React-Calendar library to your project using npm:

npm install react-calendar

Adding a Calendar to Your React App

To add a calendar to your React app, import the Calendar component from react-calendar and add it to your app.js file:

import React, { useState } from 'eact';
import Calendar from 'eact-calendar';

function App() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <p>Selected date: {date.toLocaleDateString()}</p>
      <Calendar onChange={(value) => setDate(value)} />
    </div>
  );
}

Styling Your Calendar

React-Calendar provides default styling, which you can apply by importing its stylesheet:

import 'eact-calendar/dist/Calendar.css';

To customize the styling, override the classes and add your own CSS properties. You can also copy the entire calendar CSS from node_modules/react-calendar/dist and import it into your App.js file.

Selecting a Date Range

To enable date range selection, pass the selectRange prop to your Calendar component:

import React, { useState } from 'eact';
import Calendar from 'eact-calendar';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());

  return (
    <div>
      <p>Selected date range: {startDate.toLocaleDateString()} - {endDate.toLocaleDateString()}</p>
      <Calendar
        selectRange={true}
        onChange={({ startDate, endDate }) => {
          setStartDate(startDate);
          setEndDate(endDate);
        }}
      />
    </div>
  );
}

Customizing React-Calendar

React-Calendar offers various props to customize your calendar:

• defaultValue: Sets a default selected value.
• defaultView: Sets the initial date view (month, year, decade, or century).
• maxDate and minDate: Restrict the date range selection.
• maxDetail and minDetail: Control the granularity of the calendar.
• nextLabel and prevLabel: Customize the navigation button labels.

Explore these props to create a calendar that fits your application’s needs.

Click Events in React-Calendar

React-Calendar supports various click events, including:

• onChange: Triggers when a user selects a date.
• onClickDay: Triggers when a user clicks on a specific day.
• onViewChange: Triggers when the user navigates between views.

Use these events to trigger functions based on user interactions.

Explore the official documentation for more examples and use cases.