How wojtekmaj/react-calendar works
react-calendar is a React date-picker component: users choose a date or range in a calendar view, navigate between periods, and receive selected values through callbacks. Its four views cover days, months, years, and decades/centuries; shared date and formatting logic supports locale-aware rendering, calendar conventions, bounds, and range highlighting. The excerpts show the main calendar’s calls into date utilities and navigation, plus several view renderers. Other view internals are represented from the source index and README, so their detailed wiring is not asserted.
Main entry points: Calendar.tsx Calendar controller · dates.ts Date operations · MonthView.tsx Month view · Navigation.tsx Period navigation
Components 21
Calendar interaction
- Calendar controller
packages/react-calendar/src/Calendar.tsx - Period navigation
packages/react-calendar/src/Calendar/Navigation.tsx
Period views
- Month view
packages/react-calendar/src/MonthView.tsx - Day grid
packages/react-calendar/src/MonthView/Days.tsx - Weekday headings
packages/react-calendar/src/MonthView/Weekdays.tsx - Week numbers
packages/react-calendar/src/MonthView/WeekNumbers.tsx - Day tile
packages/react-calendar/src/MonthView/Day.tsx - Year view
packages/react-calendar/src/YearView.tsx - Month tiles
packages/react-calendar/src/YearView/Months.tsx - Month tile
packages/react-calendar/src/YearView/Month.tsx - Decade view
packages/react-calendar/src/DecadeView.tsx - Year tiles
packages/react-calendar/src/DecadeView/Years.tsx - Year tile
packages/react-calendar/src/DecadeView/Year.tsx - Century view
packages/react-calendar/src/CenturyView.tsx - Decade tiles
packages/react-calendar/src/CenturyView/Decades.tsx - Decade tile
packages/react-calendar/src/CenturyView/Decade.tsx
Date and locale
- Date operations
packages/react-calendar/src/shared/dates.ts - Locale formatting
packages/react-calendar/src/shared/dateFormatter.ts - Calendar conventions
packages/react-calendar/src/shared/const.ts - Range utilities
packages/react-calendar/src/shared/utils.ts
Other components
- React app
Connections 27
- React app → Calendar controller: renders
README.md - Calendar controller → React app: emits selection
README.md - Calendar controller → Period navigation: renders
packages/react-calendar/src/Calendar.tsx - Calendar controller → Date operations: calls
packages/react-calendar/src/Calendar.tsx - Calendar controller → Range utilities: checks bounds
packages/react-calendar/src/Calendar.tsx - Period navigation → Date operations: computes periods
packages/react-calendar/src/Calendar/Navigation.tsx - Period navigation → Locale formatting: formats labels
packages/react-calendar/src/Calendar/Navigation.tsx - Calendar controller → Month view: renders view
- Calendar controller → Year view: renders view
- Calendar controller → Decade view: renders view
- Calendar controller → Century view: renders view
- Month view → Day grid: renders grid
- Month view → Weekday headings: renders headings
- Month view → Week numbers: renders numbers
- Day grid → Day tile: renders tiles
packages/react-calendar/src/MonthView/Days.tsx - Year view → Month tiles: renders tiles
- Month tiles → Month tile: renders tiles
- Decade view → Year tiles: renders tiles
- Year tiles → Year tile: renders tiles
packages/react-calendar/src/DecadeView/Years.tsx - Century view → Decade tiles: renders tiles
- Decade tiles → Decade tile: renders tiles
packages/react-calendar/src/CenturyView/Decades.tsx - Day grid → Date operations: gets weekday
packages/react-calendar/src/MonthView/Days.tsx - Weekday headings → Date operations: gets weekday
packages/react-calendar/src/MonthView/Weekdays.tsx - Weekday headings → Locale formatting: formats names
packages/react-calendar/src/MonthView/Weekdays.tsx - Calendar controller → Date operations: uses calendar rules
packages/react-calendar/src/Calendar.tsx - Date operations → Calendar conventions: uses conventions
packages/react-calendar/src/shared/dates.ts - Range utilities → Date operations: gets date ranges
packages/react-calendar/src/shared/utils.ts