Skip to content

Commit 618bac4

Browse files
gpblgpbl
authored
docs: update anatomy diagrams (#2984)
1 parent fa59bfc commit 618bac4

9 files changed

Lines changed: 505 additions & 60 deletions

File tree

‎apps/website/docs/docs/anatomy.mdx‎

Lines changed: 65 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
sidebar_position: 1
33
---
44

5-
import anatomyDark from "../img/anatomy-dark.png";
6-
import anatomyLight from "../img/anatomy-light.png";
7-
85
# DayPicker Anatomy
96

107
To better understand the documentation, familiarize yourself with the elements that compose DayPicker:
@@ -16,33 +13,71 @@ To better understand the documentation, familiarize yourself with the elements t
1613
- **Day**: Represents a day of the month, which can have different modifiers, such as:
1714
- **selected**: The day is selected.
1815
- **disabled**: The day is disabled.
16+
- **hidden**: The day is hidden.
17+
- **focused**: The day has focus.
1918
- **today**: The day is today.
2019
- **outside**: The day is outside the current month.
21-
- **Footer**: An ARIA live region used to announce the selected date.
22-
23-
The UI elements are mapped to CSS classes. A complete list can be found in the [`UI`](../api/enumerations/UI.md) enum.
24-
25-
<BrowserWindow shadow={false}>
26-
<div style={{ overflow: "auto" }}>
27-
<img
28-
style={{
29-
maxWidth: 600,
30-
width: "100%",
31-
margin: "2em auto",
32-
display: "block",
33-
}}
34-
src={`${anatomyLight}#gh-light-mode-only`}
35-
alt="Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected."
36-
/>
37-
<img
38-
style={{
39-
maxWidth: 600,
40-
width: "100%",
41-
margin: "2em auto",
42-
display: "block",
43-
}}
44-
src={`${anatomyDark}#gh-dark-mode-only`}
45-
alt="Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected."
46-
/>
47-
</div>
20+
- **range_start**: The day is the start of a selected range.
21+
- **range_middle**: The day is inside a selected range.
22+
- **range_end**: The day is the end of a selected range.
23+
- **Footer**: An ARIA live region that displays custom footer content, often used to announce selected dates.
24+
25+
The stylable UI elements are mapped to CSS classes. A complete list can be found in the [`UI`](../api/enumerations/UI.md) enum.
26+
27+
<BrowserWindow
28+
shadow={false}
29+
bodyStyle={{ justifyContent: "flex-start", padding: 0 }}
30+
>
31+
<AnatomyDiagram>
32+
<Examples.Anatomy />
33+
</AnatomyDiagram>
4834
</BrowserWindow>
35+
36+
## Rendered Structure
37+
38+
DayPicker renders the calendar with this component structure:
39+
40+
```text
41+
Root
42+
├── Months
43+
│ ├── Nav
44+
│ │ ├── PreviousMonthButton
45+
│ │ │ └── Chevron
46+
│ │ └── NextMonthButton
47+
│ │ └── Chevron
48+
│ └── Month
49+
│ ├── MonthCaption
50+
│ │ ├── CaptionLabel
51+
│ │ └── DropdownNav
52+
│ │ ├── MonthsDropdown
53+
│ │ │ └── Dropdown
54+
│ │ │ └── DropdownRoot
55+
│ │ │ ├── Select
56+
│ │ │ │ └── Option
57+
│ │ │ └── CaptionLabel
58+
│ │ │ └── Chevron
59+
│ │ └── YearsDropdown
60+
│ │ └── Dropdown
61+
│ │ └── DropdownRoot
62+
│ │ ├── Select
63+
│ │ │ └── Option
64+
│ │ └── CaptionLabel
65+
│ │ └── Chevron
66+
│ └── MonthGrid
67+
│ ├── Weekdays
68+
│ │ ├── WeekNumberHeader
69+
│ │ └── Weekday
70+
│ └── Weeks
71+
│ └── Week
72+
│ ├── WeekNumber
73+
│ └── Day
74+
│ └── DayButton
75+
└── Footer
76+
```
77+
78+
Some components are conditional:
79+
80+
- `Footer` renders only when the `footer` prop is set.
81+
- Week-number elements render only with `showWeekNumber`.
82+
- Dropdown elements render only with a dropdown `captionLayout`.
83+
- Navigation placement depends on `navLayout`: the hierarchy above shows the default placement; with `navLayout="around"`, navigation buttons render beside the month caption, and with `navLayout="after"`, the navigation bar renders after the caption in the last month.

‎apps/website/examples-v9/Anatomy.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// @ts-nocheck
2+
import React from "react";
3+
import { type DateRange, DayPicker } from "react-day-picker-v9";
4+
5+
const selectedRange: DateRange = {
6+
from: new Date(2024, 5, 17),
7+
to: new Date(2024, 5, 20),
8+
};
9+
10+
const selectedDay = new Date(2024, 5, 28);
11+
const month = new Date(2024, 5);
12+
const noop = () => undefined;
13+
14+
export function Anatomy() {
15+
return (
16+
<DayPicker
17+
mode="range"
18+
month={month}
19+
selected={selectedRange}
20+
today={new Date(2024, 5, 6)}
21+
disabled={new Date(2024, 5, 15)}
22+
modifiers={{ selected: selectedDay }}
23+
onSelect={noop}
24+
showOutsideDays
25+
showWeekNumber
26+
footer="Please pick a date"
27+
/>
28+
);
29+
}

‎apps/website/examples-v9/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// @ts-nocheck
22
export * from "./AccessibleDatePicker";
3+
export * from "./Anatomy";
34
export * from "./Animate";
45
export * from "./AnimateCSSVars";
56
export * from "./AnimateRange";

‎apps/website/src/components/AnatomyDiagram.module.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
.viewport {
2+
margin: 0 0 var(--ifm-leading);
3+
overflow-x: auto;
4+
width: 100%;
5+
}
6+
7+
.frame {
8+
overflow: hidden;
9+
position: relative;
10+
width: 100%;
11+
}
12+
13+
.diagram {
14+
color: #111927;
15+
font-family: var(--ifm-font-family-base);
16+
height: 590px;
17+
margin: 0;
18+
position: relative;
19+
transform-origin: top left;
20+
width: 780px;
21+
}
22+
23+
:global([data-theme="dark"]) .diagram {
24+
color: #f9fafb;
25+
}
26+
27+
.calendar {
28+
left: 260px;
29+
position: absolute;
30+
top: 125px;
31+
z-index: 1;
32+
}
33+
34+
.lines {
35+
inset: 0;
36+
pointer-events: none;
37+
position: absolute;
38+
transform: translateY(-60px);
39+
z-index: 2;
40+
}
41+
42+
.lines path {
43+
stroke: currentColor;
44+
stroke-linecap: round;
45+
stroke-linejoin: round;
46+
stroke-width: 1.15;
47+
vector-effect: non-scaling-stroke;
48+
}
49+
50+
.callout {
51+
color: currentColor;
52+
font-size: 14px;
53+
font-weight: 400;
54+
letter-spacing: 0;
55+
line-height: 1.1;
56+
position: absolute;
57+
transform: translateY(-60px);
58+
white-space: nowrap;
59+
z-index: 3;
60+
}
61+
62+
.leftCallout {
63+
text-align: right;
64+
width: 178px;
65+
}
66+
67+
.centerCallout {
68+
text-align: center;
69+
transform: translate(-50%, -60px);
70+
}
71+
72+
.monthCaption {
73+
left: 300px;
74+
top: 90px;
75+
}
76+
77+
.navigationBar {
78+
left: 540px;
79+
top: 80px;
80+
}
81+
82+
.navigationButtons {
83+
left: 640px;
84+
top: 104px;
85+
}
86+
87+
.weekdaysRow {
88+
left: 20px;
89+
top: 240px;
90+
}
91+
92+
.weekdays {
93+
left: 426px;
94+
top: 134px;
95+
}
96+
97+
.weekNumberHeader {
98+
left: 20px;
99+
top: 192px;
100+
}
101+
102+
.weekRows {
103+
left: 20px;
104+
top: 318px;
105+
}
106+
107+
.weekNumbers {
108+
left: 20px;
109+
top: 466px;
110+
}
111+
112+
.dayButton {
113+
left: 648px;
114+
top: 318px;
115+
}
116+
117+
.today {
118+
left: 648px;
119+
top: 278px;
120+
}
121+
122+
.disabledDay {
123+
left: 648px;
124+
top: 370px;
125+
}
126+
127+
.rangeStart {
128+
left: 370px;
129+
top: 608px;
130+
}
131+
132+
.rangeMiddle {
133+
left: 440px;
134+
top: 576px;
135+
}
136+
137+
.rangeEnd {
138+
left: 502px;
139+
top: 608px;
140+
}
141+
142+
.selectedDay {
143+
left: 648px;
144+
top: 478px;
145+
}
146+
147+
.outsideDays {
148+
left: 648px;
149+
top: 592px;
150+
}
151+
152+
.footer {
153+
left: 6px;
154+
top: 538px;
155+
}

0 commit comments

Comments
 (0)