@_--/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