Calendar

<script lang="ts">
  import { getLocalTimeZone, today } from "@internationalized/date";
  import { Calendar } from "$lib/components/ui/calendar/index.js";
 
  let value = today(getLocalTimeZone());
</script>
 
<Calendar
  type="single"
  bind:value
  class="rounded-md border shadow-sm"
  captionLayout="dropdown"
/>

Blocks

We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.

See call calendar blocks in the Blocks Library page.

About

The <Calendar /> component is built on top of the Bits UI 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

pnpm dlx shadcn-svelte@latest add calendar

npx shadcn-svelte@latest add calendar

bun x shadcn-svelte@latest add calendar

npx shadcn-svelte@latest add calendar

pnpm i bits-ui @internationalized/date -D

npm i bits-ui @internationalized/date -D

bun install bits-ui @internationalized/date -D

yarn install bits-ui @internationalized/date -D

Date Picker

You can use the <Calendar /> component to build a date picker. See the Date Picker page for more information.

Examples

Range Calendar

Month and Year Selector

Date of Birth Picker

Date and Time Picker

Natural Language Picker

This component uses the chrono-node library to parse natural language dates.

Upgrade Guide

You can upgrade to the latest version of the <Calendar /> component by running the following command:

pnpm dlx shadcn-svelte@latest add calendar

npx shadcn-svelte@latest add calendar

bun x shadcn-svelte@latest add calendar

npx shadcn-svelte@latest add calendar

When you're prompted to overwrite the existing files, select Yes. If you have made any changes to the Calendar component, you will need to merge your changes with the new version.

Installing Blocks

After upgrading the Calendar component, you can add the new blocks with the following:

pnpm dlx shadcn-svelte@latest add calendar-02

npx shadcn-svelte@latest add calendar-02

bun x shadcn-svelte@latest add calendar-02

npx shadcn-svelte@latest add calendar-02

This will add the latest version of the calendar blocks.