@_--/react-calendar v0.0.0-alpha.9

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

props