Calendar

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/calendar.json

Usage

<script lang="ts">
  import { Calendar } from "$lib/components/ui/calendar/index.js";
</script>

<Calendar />

Calendar is the Svelte calendar implementation used by COSS for Svelte. It preserves the COSS calendar grid, styling, keyboard navigation, locale handling, and single, multiple, and range selection contracts.

A calendar component for date selection.

Prop	Type	Default	Description
`mode`	`"single" \\| "multiple" \\| "range"`	`"single"`	Selection mode for the calendar.
`captionLayout`	`"label" \\| "dropdown" \\| "dropdown-months" \\| "dropdown-years"`	`"label"`	Caption presentation.
`selected`	`Date \\| Date[] \\| DateRange`		Current selection. Supports `bind:selected`.
`onSelect`	`(selected, triggerDate, modifiers, event) => void`		Runs after a date selection.
`showOutsideDays`	`boolean`	`true`	Shows dates from adjacent months.
`startMonth`	`Date`		First navigable month.
`endMonth`	`Date`		Last navigable month.
`classNames`	`CalendarClassNames`		Adds classes to calendar parts.
`components`	`CalendarComponents`		Svelte snippets that replace calendar parts.

For the full contract, use the exported CalendarProps type from $lib/components/ui/calendar/index.js.

Customizing Cell Size

The calendar uses CSS custom properties for cell sizing. It uses --spacing(10) on mobile and --spacing(9) on larger screens by default.

<Calendar class="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]" />

Examples

Single Date Selection

Date Range Selection

Use captionLayout="dropdown" with startMonth and endMonth to enable month and year navigation.

Calendar with the COSS Select component for month and year navigation.

Calendar with a searchable COSS Combobox for month and year navigation.

Changelog

July 26, 2026 — The pinned COSS reference upgraded to React DayPicker 10 and moved from react-day-picker to @daypicker/react. This Svelte port preserves the resulting COSS behavior and styling without shipping React.