Calendar

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/calendar
Copy

Usage#

Copy<script lang="ts">
  import { Calendar } from "@/components/ui/calendar"
</script>
 
<Calendar type="single" />

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.

Date Picker#

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

Examples#

Basic#

A basic calendar component.

Range Calendar#

Use <RangeCalendar /> to enable range selection.

Month and Year Selector#

Use captionLayout="dropdown" to show month and year dropdowns.

Presets#

Date and Time Picker#

Week Numbers#

Use weekNumbers to show week numbers.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the Bits UI Calendar documentation for more information on the Calendar component.