Forms

Calendar

Keyboard-navigable month grid for choosing a calendar date with full styling control and min/max constraints.

import { Calendar } from '@lostgradient/cinder/calendar';
formdatecalendar
01

Overview

Keyboard-navigable month grid for selecting a single local calendar date.

Usage

svelte 
<script lang="ts">
  import { Calendar } from '@lostgradient/cinder/calendar';

  let value = $state<string | undefined>('2026-06-29');
</script>

<Calendar bind:value />
Live preview

June 2026

2026-06-29
02

When to use

Use when
  • Rendering a custom date-grid picker inside an input popover.
  • Requiring consistent cross-browser calendar behavior that native date controls cannot provide.
Avoid when
  • A plain browser-managed date input is sufficient and custom keyboard semantics are not required.
03

Examples

Basic calendar

Keyboard-navigable calendar grid with controlled ISO date value.

04

Props

Props for calendar
Name
Type
Default
Description
id text Optional root id.
selectionMode 'single' | 'range' 'single' Selection model. Defaults to single.
rangeStart text Start endpoint for range selection.
rangeEnd text End endpoint for range selection.
onRangeChange (range: { start: string | undefined; end: string | undefined }) => void Called when a range endpoint is selected.
rangeHover text Preview endpoint while hovering a range.
value bindable text Selected ISO date (YYYY-MM-DD). Bindable.
month text Visible month anchor (YYYY-MM-DD), defaults to selected date or today.
min text Earliest selectable day (YYYY-MM-DD).
max text Latest selectable day (YYYY-MM-DD).
firstDayOfWeek number 0 First weekday index, 0 Sunday to 6 Saturday. Defaults to 0.
locale text 'en-US' Localized month label locale. Defaults to en-US.
label text 'Calendar' Accessible label for the grid. Defaults to Calendar.
disabled boolean false Disable interaction.
onValueChange (value: string) => void Called when the user commits a day selection.
disabledDate (value: string) => boolean Return true to disable a specific day.