# wojtekmaj/react-calendar architecture

> Architecture diagram of the GitHub repository wojtekmaj/react-calendar, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/wojtekmaj/react-calendar
- Repository: https://github.com/wojtekmaj/react-calendar

## Overview

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: [`packages/react-calendar/src/Calendar.tsx`](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar.tsx) (Calendar controller), [`packages/react-calendar/src/shared/dates.ts`](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/dates.ts) (Date operations), [`packages/react-calendar/src/MonthView.tsx`](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView.tsx) (Month view), [`packages/react-calendar/src/Calendar/Navigation.tsx`](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar/Navigation.tsx) (Period navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_calendar["Calendar interaction"]
  node_calendar["Calendar controller<br/>[Calendar.tsx]"]
  node_navigation["Period navigation<br/>[Navigation.tsx]"]
end

subgraph group_views["Period views"]
  node_month["Month view<br/>[MonthView.tsx]"]
  node_days["Day grid<br/>[Days.tsx]"]
  node_weekdays["Weekday headings<br/>[Weekdays.tsx]"]
  node_weeknumbers["Week numbers<br/>[WeekNumbers.tsx]"]
  node_daytile["Day tile<br/>[Day.tsx]"]
  node_yearview["Year view<br/>[YearView.tsx]"]
  node_months["Month tiles<br/>[Months.tsx]"]
  node_monthtile["Month tile<br/>[Month.tsx]"]
  node_decadeview["Decade view<br/>[DecadeView.tsx]"]
  node_years["Year tiles<br/>[Years.tsx]"]
  node_yeartile["Year tile<br/>[Year.tsx]"]
  node_centuryview["Century view<br/>[CenturyView.tsx]"]
  node_decades["Decade tiles<br/>[Decades.tsx]"]
  node_decadetile["Decade tile<br/>[Decade.tsx]"]
end

subgraph group_shared["Date and locale"]
  node_shared_dates["Date operations<br/>[dates.ts]"]
  node_formatting["Locale formatting<br/>[dateFormatter.ts]"]
  node_constants["Calendar conventions<br/>[const.ts]"]
  node_utilities["Range utilities<br/>[utils.ts]"]
end

node_consumer(("React app"))

node_consumer -->|"renders"| node_calendar
node_calendar -->|"emits selection"| node_consumer
node_calendar -->|"renders"| node_navigation
node_calendar -->|"calls"| node_shared_dates
node_calendar -->|"checks bounds"| node_utilities
node_navigation -->|"computes periods"| node_shared_dates
node_navigation -->|"formats labels"| node_formatting
node_calendar -.->|"renders view"| node_month
node_calendar -.->|"renders view"| node_yearview
node_calendar -.->|"renders view"| node_decadeview
node_calendar -.->|"renders view"| node_centuryview
node_month -.->|"renders grid"| node_days
node_month -.->|"renders headings"| node_weekdays
node_month -.->|"renders numbers"| node_weeknumbers
node_days -->|"renders tiles"| node_daytile
node_yearview -.->|"renders tiles"| node_months
node_months -.->|"renders tiles"| node_monthtile
node_decadeview -.->|"renders tiles"| node_years
node_years -->|"renders tiles"| node_yeartile
node_centuryview -.->|"renders tiles"| node_decades
node_decades -->|"renders tiles"| node_decadetile
node_days -->|"gets weekday"| node_shared_dates
node_weekdays -->|"gets weekday"| node_shared_dates
node_weekdays -->|"formats names"| node_formatting
node_calendar -->|"uses calendar rules"| node_shared_dates
node_shared_dates -->|"uses conventions"| node_constants
node_utilities -->|"gets date ranges"| node_shared_dates

click node_calendar "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar.tsx"
click node_navigation "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar/Navigation.tsx"
click node_month "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView.tsx"
click node_days "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/Days.tsx"
click node_weekdays "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/Weekdays.tsx"
click node_weeknumbers "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/WeekNumbers.tsx"
click node_daytile "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/Day.tsx"
click node_yearview "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/YearView.tsx"
click node_months "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/YearView/Months.tsx"
click node_monthtile "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/YearView/Month.tsx"
click node_decadeview "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/DecadeView.tsx"
click node_years "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/DecadeView/Years.tsx"
click node_yeartile "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/DecadeView/Year.tsx"
click node_centuryview "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/CenturyView.tsx"
click node_decades "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/CenturyView/Decades.tsx"
click node_decadetile "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/CenturyView/Decade.tsx"
click node_shared_dates "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/dates.ts"
click node_formatting "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/dateFormatter.ts"
click node_constants "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/const.ts"
click node_utilities "https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/utils.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_calendar,node_navigation toneBlue
class node_month,node_days,node_weekdays,node_weeknumbers,node_daytile,node_yearview,node_months,node_monthtile,node_decadeview,node_years,node_yeartile,node_centuryview,node_decades,node_decadetile toneAmber
class node_shared_dates,node_formatting,node_constants,node_utilities toneMint
class node_consumer toneIndigo
```

## Components

### Calendar interaction

- [Calendar controller](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar.tsx): `packages/react-calendar/src/Calendar.tsx`
- [Period navigation](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar/Navigation.tsx): `packages/react-calendar/src/Calendar/Navigation.tsx`

### Period views

- [Month view](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView.tsx): `packages/react-calendar/src/MonthView.tsx`
- [Day grid](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/Days.tsx): `packages/react-calendar/src/MonthView/Days.tsx`
- [Weekday headings](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/Weekdays.tsx): `packages/react-calendar/src/MonthView/Weekdays.tsx`
- [Week numbers](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/WeekNumbers.tsx): `packages/react-calendar/src/MonthView/WeekNumbers.tsx`
- [Day tile](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/MonthView/Day.tsx): `packages/react-calendar/src/MonthView/Day.tsx`
- [Year view](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/YearView.tsx): `packages/react-calendar/src/YearView.tsx`
- [Month tiles](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/YearView/Months.tsx): `packages/react-calendar/src/YearView/Months.tsx`
- [Month tile](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/YearView/Month.tsx): `packages/react-calendar/src/YearView/Month.tsx`
- [Decade view](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/DecadeView.tsx): `packages/react-calendar/src/DecadeView.tsx`
- [Year tiles](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/DecadeView/Years.tsx): `packages/react-calendar/src/DecadeView/Years.tsx`
- [Year tile](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/DecadeView/Year.tsx): `packages/react-calendar/src/DecadeView/Year.tsx`
- [Century view](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/CenturyView.tsx): `packages/react-calendar/src/CenturyView.tsx`
- [Decade tiles](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/CenturyView/Decades.tsx): `packages/react-calendar/src/CenturyView/Decades.tsx`
- [Decade tile](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/CenturyView/Decade.tsx): `packages/react-calendar/src/CenturyView/Decade.tsx`

### Date and locale

- [Date operations](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/dates.ts): `packages/react-calendar/src/shared/dates.ts`
- [Locale formatting](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/dateFormatter.ts): `packages/react-calendar/src/shared/dateFormatter.ts`
- [Calendar conventions](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/const.ts): `packages/react-calendar/src/shared/const.ts`
- [Range utilities](https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/shared/utils.ts): `packages/react-calendar/src/shared/utils.ts`

### Other components

- **React app**

## Connections

- React app → Calendar controller: renders (evidence: `README.md`)
- Calendar controller → React app: emits selection (evidence: `README.md`)
- Calendar controller → Period navigation: renders (evidence: `packages/react-calendar/src/Calendar.tsx`)
- Calendar controller → Date operations: calls (evidence: `packages/react-calendar/src/Calendar.tsx`)
- Calendar controller → Range utilities: checks bounds (evidence: `packages/react-calendar/src/Calendar.tsx`)
- Period navigation → Date operations: computes periods (evidence: `packages/react-calendar/src/Calendar/Navigation.tsx`)
- Period navigation → Locale formatting: formats labels (evidence: `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 (evidence: `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 (evidence: `packages/react-calendar/src/DecadeView/Years.tsx`)
- Century view → Decade tiles: renders tiles
- Decade tiles → Decade tile: renders tiles (evidence: `packages/react-calendar/src/CenturyView/Decades.tsx`)
- Day grid → Date operations: gets weekday (evidence: `packages/react-calendar/src/MonthView/Days.tsx`)
- Weekday headings → Date operations: gets weekday (evidence: `packages/react-calendar/src/MonthView/Weekdays.tsx`)
- Weekday headings → Locale formatting: formats names (evidence: `packages/react-calendar/src/MonthView/Weekdays.tsx`)
- Calendar controller → Date operations: uses calendar rules (evidence: `packages/react-calendar/src/Calendar.tsx`)
- Date operations → Calendar conventions: uses conventions (evidence: `packages/react-calendar/src/shared/dates.ts`)
- Range utilities → Date operations: gets date ranges (evidence: `packages/react-calendar/src/shared/utils.ts`)