Top 10+ React JS Calendar Examples

Looking for the best React JS calendar examples? This article lists 10+ popular and easy-to-use React calendar libraries, with code snippets and demos. Whether you need a simple datepicker or a complex event calendar, you'll find the perfect library here.

1. Every Day Calendar With React

Every Day Calendar With React inspired by Simone Giertz.
It stores clicked days in localStorage.

It looks like this:

This is image title

You can use it as a mobile app by visiting https://kissgyorgy.me/every-day-calendar/ and using the “Add to Home Screen” button.

You can add it multiple times with different names and they will have different localStorage objects, so you can use it to track different things:

This is image title

View Demo: https://kissgyorgy.me/every-day-calendar/

Github: https://github.com/kissgyorgy/every-day-calendar

Download Link: https://github.com/kissgyorgy/every-day-calendar/archive/master.zip

2. An easily internationalizable and mobile-friendly datepicker library for the web

An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.

This is image title

View Demo: https://react-datepicker.netlify.com/?path=/story/daterangeinput--simple-demo

Github: https://github.com/tresko/react-datepicker

Download Link: https://github.com/tresko/react-datepicker/archive/master.zip

3. A lightweight calendar for React

React-light-calendar is a tiny calendar component which does NOT depend on any date lib. React-light-calendar use timestamp format date which allows it to be coupled with any date lib.

This is image title

View Demo: https://lelivrescolaire.github.io/react-light-calendar/?path=/story/calendar--onchange

Github: https://github.com/lelivrescolaire/react-light-calendar

Download Link: https://github.com/lelivrescolaire/react-light-calendar/archive/master.zip

4. Advance React Date and Time Picker for jalaali calender

It contains 3 types of jalaali (persian) date pickers, which are range (from, to) date and time pickerو range date picker, date picker and date and time picker.

This is image title

Github: https://github.com/A-Kasaaian/react-advance-jalaali-datepicker

Download Link: https://github.com/A-Kasaaian/react-advance-jalaali-datepicker/archive/master.zip

5. React Advanced Date Time Range Picker

This is a fully rewritten, keyboard friendly implementation of a date time range picker. It has been designed for selecting date ranges and does not currently include a single date picker.

It has been designed currently to work with React Version 15

This is image title

View Demo: https://codesandbox.io/s/zxoo178m03?fontsize=14&module=%2Fsrc%2FApp.js

Github: https://github.com/v0ltoz/react-datetimepicker

Download Link: https://github.com/v0ltoz/react-datetimepicker/archive/master.zip

6. Ultimate calendar for your React app

Ultimate calendar for your React app.

Pick days, months, years, or even decades
Supports range selection
Supports virtually any language
No moment.js needed

This is image title

View Demo: http://projects.wojtekmaj.pl/react-calendar/

Github: https://github.com/wojtekmaj/react-calendar

Download Link: https://github.com/wojtekmaj/react-calendar/archive/master.zip

7. A scheduler and resource planning component built for React

A scheduler and resource planning component built for React and made for modern browsers (IE10+), IE needs babel-polyfill.

This is image title

View Demo: https://stephenchou1017.github.io/scheduler/#/

Github: https://github.com/StephenChou1017/react-big-scheduler

8. A react date time picker component

A react date time picker component.NO Jquery, NO Moment.js

This is image title

View Demo: https://edwardfhsiao.github.io/react-picky-date-time/

Github: https://github.com/edwardfhsiao/react-picky-date-time

Download Link: https://github.com/edwardfhsiao/react-picky-date-time/archive/master.zip

9. A numpad for number built with React

A numpad for number, date and time, built with and for React. It’s written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form.

This is image title

View Demo: https://gpietro.github.io/react-numpad-demo/

Github: https://github.com/gpietro/react-numpad

Download Link: https://github.com/gpietro/react-numpad/archive/master.zip

10. A React calendar component with as few frills as humanly possible

A no-frills calendar widget that lets you bring your own styling. This component takes a start date, an end date, and a renderDay function, and then gets out of the way.

This is image title

View Demo: https://todaytix.github.io/tt-react-calendar/

Github: https://github.com/TodayTix/tt-react-calendar

Download Link: https://github.com/TodayTix/tt-react-calendar/archive/master.zip

Download Link: https://github.com/StephenChou1017/react-big-scheduler/archive/master.zip

#reactjs #javascript #programming