Calendar - shadcn-svelte

Docs

Calendar

A calendar component that allows users to select dates.

Component Source Primitive API Reference

	<script lang="ts">
  import { Calendar } from "$lib/components/ui/calendar";
  import { today, getLocalTimeZone } from "@internationalized/date";

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

<Calendar bind:value class="border rounded-md shadow" />

	<script lang="ts">
  import { Calendar } from "$lib/components/ui/calendar";
  import { today, getLocalTimeZone } from "@internationalized/date";

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

<Calendar bind:value class="border rounded-md" />

About

The <Calendar /> component is built on top of the Bits Calendar component, which uses the @internationalized/date package to handle dates.

If you're looking for a range calendar, check out the Range Calendar component.

Installation

	npx shadcn-svelte@latest add calendar

Button Card

On This Page