Calendar

An always-visible date-selection grid. Supports single-date and date-range selection, locale-aware day and month names, a week start that follows locale by default (override with week-start), min/max constraints, and full keyboard navigation.

Playground

Controls

Mode

Value

Value Start

Value End

Min

Max

Locale

Week Start

Show Outside Days

Disabled

Months

Labels

Theme

HTMLReact

ShareCopy

Usage

<!-- Basic -->
<lt-calendar></lt-calendar>

<!-- Pre-selected date -->

<lt-calendar value="2026-06-15"></lt-calendar>

<!-- Date range selection -->

<lt-calendar mode="range" value-start="2026-06-01" value-end="2026-06-15"></lt-calendar>

<!-- Two-month view -->

<lt-calendar months="2"></lt-calendar>

<!-- Two-month range picker -->

<lt-calendar mode="range" months="2"></lt-calendar>

<!-- With min/max range -->

<lt-calendar min="2026-01-01" max="2026-12-31"></lt-calendar>

<!-- French locale — week start follows the locale automatically (Monday) -->

<lt-calendar locale="fr-FR"></lt-calendar>

<!-- French locale, but force a Sunday start -->

<lt-calendar locale="fr-FR" week-start="0"></lt-calendar>

import { Calendar } from '@latty-ds/react';

// Basic

<Calendar />

// Pre-selected date

<Calendar value="2026-06-15" />

// Date range selection

<Calendar mode="range" valueStart="2026-06-01" valueEnd="2026-06-15" />

// Two-month view

<Calendar months={2} />

// Two-month range picker

<Calendar mode="range" months={2} />

// With min/max range

<Calendar min="2026-01-01" max="2026-12-31" />

// French locale — week start follows the locale automatically (Monday)

<Calendar locale="fr-FR" />

// French locale, but force a Sunday start

<Calendar locale="fr-FR" weekStart="0" />

<template>
<!-- Basic -->
<lt-calendar></lt-calendar>

<!-- Pre-selected date -->

<lt-calendar value="2026-06-15"></lt-calendar>

<!-- Date range selection -->

<lt-calendar mode="range" value-start="2026-06-01" value-end="2026-06-15"></lt-calendar>

<!-- Two-month view -->

<lt-calendar :months="2"></lt-calendar>

<!-- Two-month range picker -->

<lt-calendar mode="range" :months="2"></lt-calendar>

<!-- With min/max range -->

<lt-calendar min="2026-01-01" max="2026-12-31"></lt-calendar>

<!-- French locale — week start follows the locale automatically (Monday) -->

<lt-calendar locale="fr-FR"></lt-calendar>

<!-- French locale, but force a Sunday start -->

<lt-calendar locale="fr-FR" week-start="0"></lt-calendar>

</template>

API