tarve
Docs GitHub

Calendar

A month grid for picking a date, with min/max and disabled days.

CalendarProps packages/core/src/extra-controls.ts:352 ↗

Import

import { Calendar } from "@tarve/core";

Usage

Calendar.tsx
import { Calendar } from "@tarve/core";

let month = "2026-09";
let date = "2026-09-22";

<Calendar
  month={month}
  value={date}
  weekStartsOn={1}
  isDateDisabled={(day) => new Date(day).getDay() === 0}
  onMonthChange={(next) => {
    month = next;
  }}
  onValueChange={(next) => {
    date = next;
  }}
/>

Props

PropTypeDefault
month required string—
disabled boolean—
isDateDisabled (date: string) => boolean—
max string—
min string—
onMonthChange (month: string) => void—
onValueChange (date: string) => void—
value string—
weekStartsOn CalendarWeekStartsOn0

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

CalendarWeekStartsOn
type CalendarWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;