ComponentsCalendar & time

Calendar

A month, multi-month or year calendar with something on each day: event dots, holidays, absences, availability. Single, multiple or range selection with YYYY-MM-DD values; week start, weekend and week numbers from the locale; Turkish public holidays built in. CalendarGrid is the shared grid behind every date picker.

react-day-picker v9 + date-fns v4 components/calendar.tsx, lib/date.ts, styles/calendar.css, locale-data/core/week-info.ts, locale-data/tr/holidays.tstheme · material · accent · density · font

November 2026

November 2026
  • Article
  • Newsletter
  • Campaign

3 scheduled

  • Black Friday launch
  • Landing page refresh
  • Newsletter #49

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Calendar } from "@vamos-ui/react";

<Calendar
  value={day}
  onValueChange={setDay}
  markers={{ "2026-11-24": [{ label: "Black Friday launch", tone: "warning" }] }}
/>

Day cells expose data-today, data-selected, data-range-start / -middle / -end, data-disabled, data-outside, data-weekend and data-holiday for styling.

Cells never blur; the range band is an opaque accent mix so it stays legible on glass.

Examples

Booking: day, then time

A spa booking page: closed Mondays, a 5-week window, “slots left” dots, and CalendarSlots — a radiogroup with loading and empty states.

November 2026

November 2026
  • Plenty of times
  • Filling up

Saturday, November 14

7 slots left

Closed on Mondays. Free cancellation up to 24 hours before.

Time off with team absences

mode="range" over two months; each day's markers are read out with the date (“Wednesday, December 23rd, 2026, Daniel Park — annual leave, …”).

December 2026 – January 2027

December 2026
January 2027
  • Annual leave
  • Sick leave
  • Parental leave

Requesting 4 days · 2 teammates are already out on Dec 23–24.

Large cells

size="lg" gives each day a content area: marker labels, holidays, “+2 more”. Weekends get the inset surface.

November 2026

Northwind Logistics · 10 activities
November 2026

Holidays by locale

The tr locale loads Turkish public holidays (Diyanet-verified religious dates) and starts weeks on Monday. Half-day eves say “from 13:00”. Pass holidays={provider} for your own data or false to hide them.

Ekim 2026

Ekim 2026
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
  • Holiday

Year view

months={12} lays out compact months in a responsive grid; prev / next move a whole year. Dots show density.

2026

January 2026
123
45678910
11121314151617
18192021222324
25262728293031
February 2026
1234567
891011121314
15161718192021
22232425262728
March 2026
1234567
891011121314
15161718192021
22232425262728
293031
April 2026
1234
567891011
12131415161718
19202122232425
2627282930
May 2026
12
3456789
10111213141516
17181920212223
24252627282930
31
June 2026
123456
78910111213
14151617181920
21222324252627
282930
July 2026
1234
567891011
12131415161718
19202122232425
262728293031
August 2026
1
2345678
9101112131415
16171819202122
23242526272829
3031
September 2026
12345
6789101112
13141516171819
20212223242526
27282930
October 2026
123
45678910
11121314151617
18192021222324
25262728293031
November 2026
1234567
891011121314
15161718192021
22232425262728
2930
December 2026
12345
6789101112
13141516171819
20212223242526
2728293031
  • 30–47 tickets
  • 48–59
  • 60+

Week numbers & week start

Week start and first-week rule come from getWeekInfo (Intl.Locale with a CLDR fallback).

en-US · weeks start Sunday

November 2026

November 2026
451234567
46891011121314
4715161718192021
4822232425262728
49293012345
506789101112

en-GB · ISO weeks, Monday start

November 2026

November 2026
442627282930311
452345678
469101112131415
4716171819202122
4823242526272829
4930123456

API

Calendar

PropTypeDefault
mode
"none" is display only.
"single" | "multiple" | "range" | "none""single"
value / defaultValue
YYYY-MM-DD values, by mode.
string | null · string[] · IsoDateRange | null—
onValueChange
Same shape as value.
(value) => void—
months
12 is the year view (compact cells).
1 | 2 | 3 | 121
month / defaultMonth / onMonthChange
Visible month as YYYY-MM (or any date in it). onMonthChange gets YYYY-MM-01.
string—
onVisibleRangeChange
The visible window, to fetch events for it.
({ start, end }) => void—
markers
Per-day { label, tone?, count? }. Dots in sm / md, labelled lines in lg; always part of the day's accessible name.
Record<string, CalendarMarker | CalendarMarker[]>—
renderDay
Custom content under the number (replaces dots).
(date: Date, info: CalendarDayInfo) => ReactNode—
holidays
Default: the locale pack (tr → Turkish public holidays).
HolidayProvider | HolidayProvider[] | false—
holidayRegion
ISO 3166-2 filter for regional holidays.
string—
min / max / disabledDays
Selectable window and unavailable days. min / max also stop navigation.
string / DayMatcher[]—
required
Single mode: the selected day can't be cleared by clicking it again.
booleanfalse
showWeekNumbers
Week number column (locale rules).
booleanfalse
weekStartsOn
Override the locale's first day (0 = Sunday).
0–6—
size
32px, --control-h, or 76px cells with content.
"sm" | "md" | "lg""md" ("sm" in year view)
variant
card wraps it in a surface.
"plain" | "card""plain"
header / headerAction
Title, Today, prev / next; extra content in the header.
boolean / ReactNodetrue
legend
Key under the grid; holidays in view are added automatically.
CalendarLegendItem[] | boolean—
loading
Placeholder dots and aria-busy while the range loads.
booleanfalse
footer
Content under the grid.
ReactNode—
gridProps
Extra react-day-picker props.
Partial<CalendarGridProps>—
labels
calendar namespace strings.
Partial<CalendarLabels>—

CalendarSlots

PropTypeDefault
slots
{ start: "HH:mm", end?, available, label? }.
CalendarSlot[]—
value / defaultValue / onValueChange
Selected start time.
string | null—
day
Heading (“Thursday, November 12”).
string | null—
loading / error / onRetry
Skeleton, error with retry, and the empty state “No times available on this day”.
boolean / ReactNode / () => void—
hourCycle / columns
Display.
12 | 24 / 2 | 3 | 4locale / 3

CalendarGrid

PropTypeDefault
…DayPickerProps
mode, selected, onSelect, month, numberOfMonths, captionLayout, showWeekNumber, modifiers, disabled… pass through (Date objects).
react-day-picker v9—
size
Cell size.
"sm" | "md" | "lg""md"
renderDayExtra
Slot under the number.
(date, modifiers) => ReactNode—
describeDay / dayTitle
Accessible-name suffix and native tooltip.
(date, modifiers) => string | undefined—
markWeekends
data-weekend from the locale's weekend.
booleantrue
Previous
Button
Next
Card