React’s hallmark feature is components, reusable pieces that can power the tiniest things in applications (e.g., a button) to the biggest (e.g., the entire app). A very commonly needed component is a calendar for picking dates. While some users might find a simple text entry sufficient for memorized dates, like birthdays, many prefer a more familiar visual, office calendar-like structure when picking dates… especially when scheduling something like a trip or meeting.
Thankfully, there are plenty of React components available, compatible with all modern browsers, that make picking dates easy. Or, if minimizing pre-built components is a company mantra, building your own calendar component isn’t the toughest lift. In this piece, we’ll review the best calendar components and also recommend some great tutorials on how to produce your own.
At the end, adding a calendar in React should be a breeze!
As ever, let’s start with foundations. A React calendar component is a React component that enables a user to explore a calendar (typically the Gregorian calendar) and pick a date or date range. Calendar components typically account for leap years and showcase days of the week to the user. They also allow users to navigate weeks, months, years, or even decades to find their target date efficiently. Some calendar components also function as time-pickers, enabling the user to choose a combination of date(s) and time(s).
Because many calendar components are only fully visible while a user is picking their date/time, developers often prefer to implement calendar components that are interoperable with a text field that records the chosen date. Thankfully, with React’s stellar data-binding features, this is a pretty simple requirement.
By using a pre-built component, developers are able to gain a few noteworthy advantages.
- Saving time. While building a component internally is entirely possible, developers will have to wrangle with the complexities of leap years, days of the week, navigation, and date ranges—using a pre-built component can equal significant savings in development time
- Improved performance. Pre-built React components are typically designed to be efficient with minimal footprint and maximal coverage of edge conditions.
- Predictable user Experience. Pre-built React components can have recognizable designs and interfaces that will be familiar to many users, even if they’re less tech savvy..
- Customizability. While building your own React component can afford you full customization of any feature, pre-built React components can be quite flexible too, offering a lot of features and enabling fast customization over the look and exposed functionality to users..
There are many components for React that fit these requirements while delivering powerful, interactive calendars. Let’s take a look at some.
react-datepicker is a massively popular React calendar component, with nearly 1 million weekly downloads at the time of writing. Developed by HackerOne, react-datepicker is a simple calendar component for choosing dates in any React app. react-datepicker is so popular that its default styling is what I imagine when I hear the words “React calendar component.”
react-datepicker is a feature-rich library, including support for custom date ranges, highlighted dates, time, displayed week numbers, multiple months, and even financial quarters. Arguably, it’s the ultimate calendar library—and its features make it easy for users to select a wide date range.
Take a closer look at the documentation for react-datepicker if you’re curious.
To install, just run:
1npm install react-datepicker --save
2# or
3yarn add react-datepickerAnd for basic usage, just spin up a date state variable and mount the component:
1import React, { useState } from "react";
2import DatePicker from "react-datepicker";
3
4import "react-datepicker/dist/react-datepicker.css";
5
6const Example = () => {
7 const [startDate, setStartDate] = useState(new Date());
8 return (
9 <DatePicker
10 selected={startDate}
11 onChange={(date) => setStartDate(date)}
12/>
13 );
14};
15react-calendar is a feature-rich calendar component with nearly 200,000 weekly downloads at the time of writing. react-calendar supports many custom features, particularly features around how the widget looks. react-calendar leans heavily on its formatDate function, which enables developers to easily customize labels for various parts of the calendar.
react-calendar is an active open-source project that was created by Wojciech Maj.
To install, just run:
1npm install react-calendar
2# or
3yarn add react-calendarTo use:
1import React, { useState } from "react";
2import Calendar from 'react-calendar';
3import 'react-calendar/dist/Calendar.css';
4
5const Example = () => {
6 const [startDate, setStartDate] = useState(new Date());
7 return (
8 <Calendar onChange={setStartDate} value={startDate} />
9 );
10 };react-big-calendar is a bit different than the two we’ve explored so far. It looks closer to Google Calendar than a date picker, sporting a day-on-month view with detailed events per day.
In short, it’s for building a calendar with events. However, because react-big-calendar is still used for creating dates or a date range, I’ll include it in this list. react-big-calendar does support a lot of customization with the way it looks and feels.
To install, just run:
1npm install --save react-big-calendar
2# or
3yarn add react-big-calendar1import React, { useState } from "react";
2import { Calendar, momentLocalizer } from 'react-big-calendar'
3import moment from 'moment'
4import { myEventsList } from './eventsList'
5
6const localizer = momentLocalizer(moment)
7
8const Example = () => {
9 const localizer = momentLocalizer(moment);
10 return (
11 <Calendar
12 localizer={localizer}
13 events={myEventsList}
14 startAccessor="start"
15 endAccessor="end"
16 style={{ height: 500 }}
17 />
18 );
19};
20You can learn more about the events list format from react-big-calendar’sdocumentation.
React Infinite Calendar is, as its name implies, is infinite—or at least, it has an infinite scroll feature. This means that as you scroll through the calendar, the current month label automatically changes. (Users can still click into that label to go directly to the previous month or any arbitrary month.) React Infinite Calendar is designed with mobile in mind, especially since a few flicks of the wrist could help a user fly through the calendar.
Built by a solo developer, Claudéric Demers, it’s a robust library with CommonJS, UMD, and ES6 builds. It supports date ranges, year selection, and keyboard bindings.
To install, just run:
1npm install react-infinite-calendar --save
2# or
3yarn add react-infinite-calendar
4To use:
1import React from 'react';
2import InfiniteCalendar from 'react-infinite-calendar';
3import 'react-infinite-calendar/styles.css';
4
5const Example = () => {
6 const [startDate, setStartDate] = useState(new Date());
7 return (
8 <InfiniteCalendar
9 width={400}
10 height={600}
11 selected={startDate}
12 onSelect={setStartDate}
13 />
14 );
15};React DayPicker is another competitive calendar framework that sports a slightly more modern default aesthetic. DayPicker is a simplified date picker, but does supports robust date range features, localization, keyboard navigation, and easy integration with input fields. It’s also accessible using ARIA attributes, a feature that’s only otherwise boasted by react-calendar on this list.
You’ll also need to install the DateTime library date-fns as a dependency. To install both React DayPicker and the dependency, just run:
1npm install react-day-picker date-fns
2# or
3yarn add react-day-picker date-fns To use:
1import React from 'react';
2
3import { format } from 'date-fns';
4import { DayPicker } from 'react-day-picker';
5
6const Example = () => {
7 const [startDate, setStartDate] = useState(new Date());
8 return (
9 <DayPicker
10 mode="single"
11 selected={startDate}
12 onSelect={setStartDate}
13 />
14 );
15};
16We’re biased, of course, and Retool isn’t a drop-in replacement for the previously mentioned entrees that work well with an already established React app.
However, Retool provides a robust component library framework for internal apps or even simple customer-facing applications. And that component library offers a calendar component and a feature-rich date picker component. Retool’s date picker includes support for events, including multi-day event, date ranges, and tight integration with application data.
A common misconception surrounding Retool is that it’s a no-code tool—we wouldn’t blame developers for wondering whether our components would be a fit for your purposes if that were the case. But you can actually write as much custom code in Retool as you’d like—and a developer-first platform, we aim to enable engineers to focus on data and backend challenges more by allowing you to automate (or not) elements of frontend development. Using prebuilt components and customizing apps with code where and how you like can give you a great leg up when it comes to velocity.
While this article is focused on prebuilt calendar components, if you’ve got the time to invest, there are also some excellent resources available on how to build your own calendar component from the ground up, like this guide from Derrick Otte on creating a calendar from scratch in React, or this one from Dept Agency on building a full-page calendar.
Between pre-built React components, Retool, and building your own, there are plenty of options to implement a calendar date-picker in your application. Decide what’s best for your project and start building!
Reader
