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

1.3.0 • Public • Published

yet-another-calendar

A simple yet highly customizable calendar library for React.

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

Installation

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

Usage

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 (
    <div>
      {page.month} {page.year}
      <button onClick={() => setPage(nextPage)}></button>
      <Calendar page={page} renderDate={Date} />
    </div>
  );
};

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.

API

<Calendar>

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

CalendarProps

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" }} />

DateRenderProps

For Calendar's renderDate prop (above).

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

Page

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

CalendarStartDay

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

Motivation

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

Install

npm i yet-another-calendar

Weekly Downloads

0

Version

1.3.0

License

none

Unpacked Size

18.1 kB

Total Files

9

Last publish

Collaborators

  • angusjf