Create a Customizable Calendar with React-Calendar

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:

“`jsx
import React, { useState } from ‘eact’;
import Calendar from ‘eact-calendar’;

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

return (

);
}
“`

Styling Your Calendar

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

jsx
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:

“`jsx
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 (

);
}
“`

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.

Get Started with React-Calendar

React-Calendar is a flexible and customizable library that can elevate your application’s date management capabilities. Explore the official documentation for more examples and use cases. If you have any questions, feel free to ask in the comments below.