@_--/react-calendar

a zero-dependency calendar component for react.

many parts still incomplete/todo, and shoddy coding style oops.

features

• single, multi, and range selection of dates; multi selection also supports drag-and-hold to (un)select multiple dates at once.
• keyboard navigation; unfortunately not aria-compliant grid, but supports...
  • arrow keys to navigate along tiles with wrapping,
  • tab to toggle between nav and tiles
  • shift + tab from nav to escape focus from calendar; shift+tab again after that to go to the previos element
  • home/end) to go to the start (end) of the row
  • shift + home/end to go to the first (last) tile
  • esc to unselect partial range dates, or otherwise escape focus from the calendar; tab after that to go to the next element
• highlight/disable dates
• hide dates before/after/outside the current month
• set which day of the week the calendar begins on
• set which days of the week are "weekends" to highlight
• customize how dates/months/years/decades are displayed
• calendar view locking
• separate css for core styles, default styles, and useful/common add-ons, all using low-precedence selectors and css custom properties

installation

# npm
npm install @_--/react-calendar

# yarn
yarn add @_--/react-calendar

usage

import React, { useState } from 'react';
import { Calendar } from '@_--/react-calendar';

const App = () => {
  const [selectedDates, setSelectedDates] = useState([]);
  return (
      <Calendar
        onChangeSelectedDates={(newState, oldState) => { setSelectedDates(newState); }}
      />
  )
}

styling

import the main stylesheet to make a minimally unstyled calendar

import '@_--/react-calendar/dist/styles/index.css';

you can separately use or build upon the default styles

import '@_--/react-calendar/dist/styles/default.css';

a preset is also provided to force calendar tiles in the month view to be square

import '@_--/react-calendar/dist/styles/preset/square-tiles.css';

the component is styled using css custom properties, making them easy to re-style and customize

calendar props

types

| name | type | :-- | :-- DayOfWeek | 0 <= x < 7

props

| prop | description | type | default | :-- | :-- | :-- | :-- className | classname to add to the calendar container element | string | selectMode | how dates are to be "selected". | "single" | "multi" | "range" | "single" weekStart | which day of the week occupies the leftmost column of the calendar, where 0=Sunday, 1=Monday, ... | DayOfWeek | 0 weekendDays | which days of the week constitute as "weekends". weekends can be styled differently. | DayOfWeek[] | [0, 6] initialDate | the date the calendar will initialize its displayed dates with | Date | new Date() initialView | what "view" the calendar should begin with | "month" | "year" | "decade" | "month" hideAdjacentMonthsDates | whether dates from the adjacent months should be hidden in the "month" view (ie the 30th of the previous month, or the 1st of the next month). true hides both | boolean | "prev" | "next" lockView | whether the calendar view cannot be changed from its initial view of decade, year, or month | boolean | false lockTiles | whether the calendar view and tiles should be locked. | boolean | false disabledDates | function describing which dates should be disabled. disabled dates cannot be selected. | (Date) => boolean | "past" | "today" | "future" | highlightedDates | function describing which dates should be highlighted. highlighted dates can be styled differently | (Date) => boolean | "today" | "today" prevButtonIcon | icon for the previous button for calendar navigation within a view | string \| JSX.element | "←" nextButtonIcon | icon for the next button for calendar navigation within a view | string \| JSX.element | "→" formatDecade | how to format the decade view heading, given the first year of the decade | (default formatter; ie "2000 - 2009") formatYear | how to format the year view heading and decade view tiles | (default formatter; ie "2000") formatMonthYear | how to format the month view heading | (Date) => string | (default formatter; ie "January 2000") formatMonth | how to format the year view tile labels | (Date) => string | (default formatter; ie "January") formatDayOfMonth | how to format the month view tiles | (Date) => string | (default formatter; ie "1") formatDayOfWeek | how to format the day of week labels | (DayOfWeek) => string | (default formatter; ie "Mon") onChangeView | function called whenever the calendar view is changed | (newView, oldView) => unknown | onChangeSelectMode | function called whenever the select mode is changed | (newSelectMode, oldSelectMode) => unknown | (default callback: if switching from range to multi select mode, selects all dates in the range; otherwise, clears selected dates) onChangeSelectedDates | function called whenever the selected dates change | (newSelectedDates, oldSelectedDates) => unknown | onChangePartialRangeDates | function called whenever the partial range dates, used for "soft highlighting" while in range select or drag-and-holding in multi select | (newPartialRangeDates, oldPartialRangeDates) => unknown |