Best React Calendar Having Simple And Flexible

Share Your Love

Here I am going to describe to you of the entire project on React Calendar Having Simple And Flexible.

React Calendar:

100% test coverage, responsive, and flexible event calendar for React.

See In Action

Backstory: After using react-big-calendar for years, I decided to create my own that is simpler to use, allows for easy customization, and uses modern React (no deprecated methods).

npm install date-fns

How to integrate React Calendar?

See this code in Action.

import {
} from '';

export const MyMonthlyCalendar = () => {
  let [currentMonth, setCurrentMonth] = useState<Date>(
    startOfMonth(new Date())

  return (
      onCurrentMonthChange={date => setCurrentMonth(date)}
      <MonthlyNav />
          { title: 'Call John', date: subHours(new Date(), 2) },
          { title: 'Call John', date: subHours(new Date(), 1) },
          { title: 'Meeting with Bob', date: new Date() },
        renderDay={data =>
, index) => (

This renders a monthly calendar view in its simplest form. Whenever a user presses next or previous on the <MonthlyNav /> the onCurrentMonthChange callback will be invoked, and it’s up to you to control the state.

This approach gives you full flexibilty to do anything you want. In my applications, I will refetch a graphql query anytime the month changes, and load events for that month.

The events get passed into MonthlyBody and then renderDay is called for every day on the calendar that has events. You can render any React component you wish, giving you as much freedom as possible.


This library uses Tailwind. This gives you two options for including the necessary CSS for the components.

I’m already using Tailwind

Awesome! You need to add node_modules/**/*.js to your tailwind.config.js to ensure the required classes aren’t purged on your production build.

I’m not using Tailwind

No problem! The library includes the minimal CSS required to render the components. Somewhere in your app, you need to import our CSS:

import 'react-big-calendar/dist/calendar-tailwind.css';


This is a monthly view similar to react-big-calendar or a Calendar application. It makes it easy to load events 1 month at a time, and render custom elements on each day.

See in action



  • currentMonth this must be a Date instance representing the first of the month you wish to view
  • onCurrentMonthChange is called any time the month is changing from the Navigation area


No props at this time


  • omitDays lets you hide certain days from the calendar, for instance, hide Saturday and Sunday. Days are represented as 0-6, as seen in the date-fns documentation. Hiding Monday would be omitDays={[1]} Hiding the weekend would be omitDays={[0, 6]}
  • events this is an array of events, the only thing required inside each object is a date field with a Date object representing the exact time of the event
  • renderDay callback function that is passed an array of events for each day displayed, letting you render the events for the day


View 1 week at a time, useful for scheduling appointments, or rendering events in a smaller area of the screen

See in action

<WeeklyCalendar week={new Date()}>
    <WeeklyDays />
      events={[{ title: 'Jane doe', date: new Date() }]}
      renderItem={({ item, showingFullWeek }) => (
              ? format(, 'MMM do k:mm')
              : format(, 'k:mm')

This code renders an event for the current date. When you are in the week view, it displays the day and time. When you drill into a single day, it displays the time only.



  • week a date object to initialize for the weekly view


A view only component to flex the buttons and content area


Renders the buttons to view an individual day

  • omitDays, same as the MonthlyBody prop


  • style optional style info for setting the container height
  • events array of events with a date field, and anything else you want.
  • renderItem callback to render individual items on the side.

Full Control

This library has very few props to understand. It takes a component-first approach instead of endless prop options.

Building a calendar is highly opinionated. This library lets you easily customize any piece of it. Let’s take a look at the MonthlyNav component:

import { useMonthlyCalendar } from '';

export const MonthlyNav = () => {
  let { currentMonth, onCurrentMonthChange } = useMonthlyCalendar();

  return (
    <div className="flex justify-end mb-4">
        onClick={() => onCurrentMonthChange(subMonths(currentMonth, 1))}
      <div className="ml-4 mr-4 w-32 text-center">
          getYear(currentMonth) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy'
        onClick={() => onCurrentMonthChange(addMonths(currentMonth, 1))}

It’s rendering some button elements, and then the current month. If it’s not the current year, it renders the year as well.

You can copy / paste this component into your own repo. The magic piece is useMonthlyCalendar. This hook will let you access anything from the calendar context.

With this in mind, you can fully replace any of the default components to have custom behaviour for your own app.

Demo: React Calendar

View: GitHub

Please comment and share this article if you find helpful and wants to improve WhatsApp us.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 366

Newsletter Updates

Enter your email address below to subscribe to our newsletter