@_--/react-calendar 中文文档教程

Question

@_--/react-calendar

用于反应的零依赖日历组件。

许多部分仍然不完整/待办事项，以及伪劣的编码风格哎呀。

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 '@_--/react-calendar/dist/styles/index.css';

，您可以单独使用或基于默认样式构建

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

还提供预设以强制 month 视图中的日历图块为正方形

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

组件使用 css 自定义样式属性，使它们易于重新设计和定制

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