Docs
Calendar

Calendar

A calendar component that allows users to select dates.

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@next add calendar

Date Picker

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

Examples

Form

Advanced Customization

The <Calendar /> component can be combined with other components to create a more complex calendar.

Month & Year Selects

Here's an example of how you could create a calendar with month and year select dropdowns instead of the previous and next buttons.