Revolutionize Your Date Handling in React with these 16 Free React Components for Calendars and Datepickers

Incorporating calendars and datepickers into React applications enhances user interaction and experience.

With numerous React libraries and components available, this post provides a curated list of 16 free React calendar and datepicker libraries and components, each with unique features and use cases, to assist developers in selecting the right tool for their projects.

1. DatePicker (Flowbite)

A TailwindCSS/Flowbite datepicker component built as a React component with types based on the original datepicker from Flowbite. This component can also be used as a plugin using the Flowbite React library.

GitHub - OMikkel/tailwind-datepicker-react: A tailwindcss/flowbite datepicker component built as a react component with types

A tailwindcss/flowbite datepicker component built as a react component with types - OMikkel/tailwind-datepicker-react

GitHubOMikkel

2. React-Calendar

React-calendar is a low-level component for rendering monthly calendars in React. It uses user-provided renderDay and renderHeader functions to create a calendar for a given month. While basic implementations are provided, they can be customized to fit specific needs.

Install

$ npm install react-calendar-component

GitHub - hanse/react-calendar: React.js Calendar Component (npm install react-calendar-component) 📅

React.js Calendar Component (npm install react-calendar-component) 📅 - hanse/react-calendar

GitHubhanse

3. Ultimate React Calendar

The 'Ultimate React Calendar' for React apps allows selection of days, months, years, or decades, supports range selection and virtually any language, and does not require moment.js.

GitHub - wojtekmaj/react-calendar: Ultimate calendar for your React app.

Ultimate calendar for your React app. Contribute to wojtekmaj/react-calendar development by creating an account on GitHub.

GitHubwojtekmaj

4. Rc Calendar

Rc Calendar or React Calendar is a free open-source React calendar component that can be used as a data and date-range picker. It supports keyboard shortcuts, many web browsers, multiple time zones, and and week numbers.

Key Features

• support ie9,ie9+,chrome,firefox,safari
• support date, month, year, decade select panel
• support week number
• support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone
• support aria and keyboard accessibility

GitHub - react-component/calendar: React Calendar

React Calendar. Contribute to react-component/calendar development by creating an account on GitHub.

GitHubreact-component

5. React Range Calendar 📆

React-range-calendar is a responsive and accessible date range picker component with numerous options, built using React.

GitHub - Expertizo/react-range-calendar: A responsive and accessible date range picker component built with React

A responsive and accessible date range picker component built with React - Expertizo/react-range-calendar

GitHubExpertizo

6. React Big Calendar

React-big-calendar is an events calendar component built for React, designed for modern browsers, and utilizes flexbox over the traditional tables-caption approach.

GitHub - jquense/react-big-calendar: gcal/outlook like calendar component

gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub.

GitHubjquense

7. React Native Calendars

React Native Calendars is a declarative, cross-platform calendar component for iOS and Android. It is customizable and the README provides basic examples for getting started. For more detailed information, refer to the official documentation.

Features

• Pure JS. No Native code required
• Date marking - dot, multi-dot, period, multi-period and custom marking
• Customization of style, content (days, months, etc) and dates
• Detailed documentation and examples
• Swipeable calendar with flexible custom rendering
• Scrolling to today, selecting dates, and more
• Allowing or blocking certain dates
• Accessibility support
• Automatic date formatting for different locales

GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆

React Native Calendar Components 🗓️ 📆 . Contribute to wix/react-native-calendars development by creating an account on GitHub.

GitHubwix

8. React Calendar Timeline

This is a free and open-source modern and responsive React timeline component. It uses Moment and Interact.js underneath.

GitHub - namespace-ee/react-calendar-timeline: A modern and responsive react timeline component.

A modern and responsive react timeline component. Contribute to namespace-ee/react-calendar-timeline development by creating an account on GitHub.

GitHubnamespace-ee

9. React Use Calendar

This is a free simple, old but usable custom React Hook for implementing a calendar with events.

GitHub - gregnb/react-use-calendar: A custom React Hook for implementing a calendar with events

A custom React Hook for implementing a calendar with events - gregnb/react-use-calendar

GitHubgregnb

10. natscale/react-calendar

The natscale/react-calendar is a lightweight, feature-rich calendar component for React, currently under development and not recommended for production use yet.

Features

• Date Range
• Fixed Date Range
• Multiple Dates
• Highlight Custom Dates
• Disable Custom Dates
• Dual Calendar
• Add Your Own Shortcuts
• Easy to Theme
• No Dependencies
• Server Side Rendering Compatible
• Lots of Easy Customizations
• Lightweight - less than 20kb

GitHub - natscale/react-calendar: A no dependencies, lightweight and feature-rich ⚡ calendar component for react.

A no dependencies, lightweight and feature-rich ⚡ calendar component for react. - natscale/react-calendar

GitHubnatscale

Introduction

A no dependency, lightweight and feature-rich calendar component for react.

React Calendar

11. React GitHub Calendar

This is an open-source React component to display a GitHub contributions calendar.

GitHub - grubersjoe/react-github-calendar: A React component to display a GitHub contributions calendar

A React component to display a GitHub contributions calendar - grubersjoe/react-github-calendar

GitHubgrubersjoe

12. React Date Picker

This open-source component offers a A simple and reusable Datepicker for your React project.

GitHub - Hacker0x01/react-datepicker: A simple and reusable datepicker component for React

A simple and reusable datepicker component for React - Hacker0x01/react-datepicker

GitHubHacker0x01

13. ReactJS - TimePicker

A ReactJS based TimePicker component to implement time or datetime selection.

GitHub - weblineindia/ReactJS-TimePicker: A ReactJS based TimePicker component to implement time or datetime selection.

A ReactJS based TimePicker component to implement time or datetime selection. - weblineindia/ReactJS-TimePicker

GitHubweblineindia

14. React-Trip-Date

React Trip Date is a fully customizable Date/Range picker for React applications. It is compatible with Material-UI theme, supports multiple months, is auto responsive, supports both Jalali and Gregorian calendars, and utilizes Day.js, a 2KB immutable date library, eliminating the need for moment.js.

GitHub - samsam-ahmadi/react-trip-date: It’s a fully customizable Date/Range picker for ReactJS.

It’s a fully customizable Date/Range picker for ReactJS. - samsam-ahmadi/react-trip-date

GitHubsamsam-ahmadi

15. React TailwindCSS Datepicker

A modern date range picker component for React using TailwindCSS 3 and Day.js. Alternative to Litepie Datepicker which uses Vuejs.

Features

• ✅ Theming options
• ✅ Dark mode
• ✅ Single Date
• ✅ Single date use Range
• ✅ Shortcuts
• ✅ TypeScript support
• ✅ Localization(i18n)
• ✅ Date formatting
• ✅ Disable specific dates
• ✅ Minimum Date and Maximum Date
• ✅ Custom shortcuts

GitHub - onesine/react-tailwindcss-datepicker: Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker. - onesine/react-tailwindcss-datepicker

GitHubonesine

16. ReactJS - Custom Datepicker eindia/ReactJS-Custom-Datepicker

ReactJS based Custom Datepicker component to select date.

GitHub - weblineindia/ReactJS-Custom-Datepicker: ReactJS based Custom Datepicker component to select date.

ReactJS based Custom Datepicker component to select date. - weblineindia/ReactJS-Custom-Datepicker

GitHubweblineindia