B

bon-ui

Calendar

Month grid with previous / next navigation and single-date selection.

Trigger

Select-like button opens the calendar in a popover. Choosing a day closes it.

Controlled: Wed, Aug 26, 2026

Basic

Uncontrolled Calendar — click a day to select, or use arrow keys when a day is focused.

October2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Small

Compact day cells via size="sm".

Oct2026
S
M
T
W
T
F
S

Huge

size="lg" is a content board at least the lg breakpoint wide. The day stays in the top-left. renderDay fills the cell, and renderAction is an optional top-right control.

September2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
  • Design review
3
4
5
6
7
8
  • Ship calendar
  • Write notes
  • Muted note
  • Some Error Long Line
9
10
11
12
13
14
  • Standup
15
16
17
18
19
20
21
  • Planning
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

Controlled

Selected: Wed, Aug 26, 2026

August2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Highlights

Mark days with data via highlights — primary wash level 1–3 and/or a dot. Keys are local YYYY-MM-DD.

September2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Disabled dates

Weekends are disabled via isDateDisabled.

October2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Disabled

The whole calendar is inert when disabled is set.

October2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat