Calendar
A calendar component that supports date selection, range selection, and event markers.
Basic Usage
Display a basic single-date calendar. Note: The component uses @internationalized/date to handle dates.
3月 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
Selected: 2026-03-24
Example
Range Selection & Events
Set mode="range" to enable date range selection. You can also use the events prop to mark specific dates.
3月 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
Start: 2026-03-24
End: 2026-03-31
Example
Popover Mode
Combine with BrCalendarPopover to display the calendar in a popover when triggered.
Select Date:
Example
API
BrCalendar Props
| Name | Type | Default | Description |
|---|---|---|---|
modelValue | DateValue | DateValue[] | { start: DateValue, end: DateValue } | - | The selected date(s) |
mode | 'single' | 'multiple' | 'range' | 'single' | Selection mode |
events | EventMarker[] | [] | Event markers for specific dates |
displayMode | 'inline' | 'popover' | 'inline' | Display mode, inline or popover |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | Start day of the week (0 for Sunday) |
showToolbar | boolean | true | Whether to show the header toolbar |
EventMarker Type
| Property | Type | Description |
|---|---|---|
date | string | Date | DateValue | Target date |
type | 'dot' | 'badge' | 'text' | Marker type |
color | string | Marker color (supports CSS variables) |
label | string | Hover tooltip text |