# Calendar A calendar component that allows users to select dates. [Docs](https://bits-ui.com/docs/components/calendar) [API Reference](https://bits-ui.com/docs/components/calendar#api-reference) ```svelte ``` ## 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](https://shadcn-svelte.com/blocks/calendar) page. ## About The `` component is built on top of the [Bits UI Calendar](https://www.bits-ui.com/docs/components/calendar) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates. If you're looking for a range calendar, check out the [Range Calendar](https://shadcn-svelte.com/docs/components/range-calendar) component. ## Installation ```bash pnpm dlx shadcn-svelte@latest add calendar ``` ```bash npx shadcn-svelte@latest add calendar ``` ```bash bun x shadcn-svelte@latest add calendar ``` ## Date Picker You can use the `` component to build a date picker. See the [Date Picker](https://shadcn-svelte.com/docs/components/date-picker) page for more information. ## Examples ### Range Calendar ```svelte ``` ### Month and Year Selector ```svelte

Dropdown {#each dropdownOptions as option (option.value)} {option.label} {/each}

``` ### Date of Birth Picker ```svelte

Date of birth {#snippet child({ props })} {/snippet} { open = false; }} maxValue={today(getLocalTimeZone())} />

``` ### Date and Time Picker ```svelte

Date {#snippet child({ props })} {/snippet} { open = false; }} captionLayout="dropdown" />

Time

``` ### Natural Language Picker This component uses the `chrono-node` library to parse natural language dates. ```svelte

Schedule Date

inputValue, (v) => { inputValue = v; const date = parseDate(v); if (date) { value = new CalendarDate( date.getFullYear(), date.getMonth() + 1, date.getDate() ); } } } placeholder="Tomorrow or next week" class="bg-background pr-10" onkeydown={(e) => { if (e.key === "ArrowDown") { e.preventDefault(); open = true; } }} /> {#snippet child({ props })} {/snippet} { inputValue = formatDate(v); open = false; }} />

Your post will be published on {formatDate(value)}.

``` ## Upgrade Guide You can upgrade to the latest version of the `` component by running the following command: ```bash pnpm dlx shadcn-svelte@latest add calendar ``` ```bash npx shadcn-svelte@latest add calendar ``` ```bash bun x 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: ```bash pnpm dlx shadcn-svelte@latest add calendar-02 ``` ```bash npx shadcn-svelte@latest add calendar-02 ``` ```bash bun x shadcn-svelte@latest add calendar-02 ``` This will add the latest version of the calendar blocks.