@_--/react-calendar
TypeScript icon, indicating that this package has built-in type declarations

0.0.0-alpha.9 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @_--/react-calendar

Weekly Downloads

3

Version

0.0.0-alpha.9

License

MIT

Unpacked Size

100 kB

Total Files

54

Last publish

Collaborators

  • williamduan