Calendar

A date picker for selecting single dates, ranges, or multiple dates.

<script lang="ts">
import { getLocalTimeZone, today } from "@internationalized/date";
import { Calendar } from "coss-svelte";

let value = $state(today(getLocalTimeZone()));
</script>

<Calendar bind:value />

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Calendar } from "coss-svelte";

Anatomy

Calendar exposes a single component export for the current implementation.

API Reference

Calendar

A date picker for selecting single dates, ranges, or multiple dates.

Signatures

{ type?: "single"; value?: CalendarValue; onValueChange?: OnChangeFn<DateValue | undefined> }{ type: "multiple"; value?: CalendarValue[]; onValueChange?: OnChangeFn<DateValue[]> }

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Behavior, selection, or HTML type passed to the underlying control.
`bind:value`	`CalendarValue \| CalendarValue[]`	-	Current value for the component. Bind with `bind:value` when supported.

children : Snippet<[CalendarRootSnippetProps]>bind:ref : HTMLElement | null

Inherits from Bits UI Calendar.Root.

Implementation Details

Status: Stable
Foundation: bits
Category: Selection & Input
Particles: 24