TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published


A simple yet highly customizable calendar library for React.

Prides itself on having both a very simple API, but also extreme flexibility.


npm i yet-another-calendar or yarn add yet-another-calendar


import { useState } from "react";
import { Calendar, Page, nextPage } from "yet-another-calendar";

const Date = ({ date }) => <button>{date.getDate()}</button>;

const App = () => {
  const [page, setPage] = useState<Page>({ month: "may", year: 2022 });

  return (
      {page.month} {page.year}
      <button onClick={() => setPage(nextPage)}></button>
      <Calendar page={page} renderDate={Date} />

Why this Calendar Library?

  • Complete behaviour flexibility, support for:
    • date pickers
    • Multiple range selectors
    • Disabled dates
    • & more!
  • Simple API
    • Just 2 props!
  • All styles can be controlled like any other React component
    • For example, using styled-components
  • Fully controlled!
  • Fully typed!
  • Fully tested - 100% code coverage!
  • Loads of examples!
  • 32x smaller bundle size compared to the most popular competitors!
  • Fully Internationalizable & right-to-left option
  • Great support for accessibility

Looks like this - but don't worry, a little styling and it can look however you want!

Simple calendar example

More Complex Example - "Date Range Picker"

date range selector

See this example on CodePen

When is this not the right library?

If you don't care what your calendar looks like, or how it behaves, and just want a calendar in your website ASAP - this library might not be for you.



This is the only exported React Component. All the props are optional, but you'll probably want to set page and renderDate.


Prop Type Example
page Page { year: 2022, month: 'jan' }
renderDate (props: DateRenderProps) => JSX.Element ({date}) => <span>{date.getDate()}</span>
calendarStartDay CalendarStartDay "sunday"

All the props from div are also supported:

<Calendar dir="rtl" style={{ backgroundColor: "red" }} />


For Calendar's renderDate prop (above).

Prop Type
date Date
belongsToPage "previous" | "current" | "next"


Field Type
year number
month "jan" | "feb" | ... | "dec"


Used to control if the calendar starts on a Monday or Sunday.

Utility Functions

Function Type
nextPage (page: Page) => Page
previousPage (page: Page) => Page
firstDate (page: Page) => Date
lastDate (page: Page) => Date
pageForDate (date: Date) => Page


Calendars shouldn't have a mind of their own.

Developers should be able to control their calendars with props!

This way the behaviour of the calendar is predictable and customisable.

This library was built with the idea that the developer should have complete control over their components state. It is proof that 'dumb' components only allow for greater flexibility, but also make interfaces simpler!

Package Sidebar


npm i yet-another-calendar

Weekly Downloads






Unpacked Size

18.1 kB

Total Files


Last publish


  • angusjf