On This Page

Installation Usage About Date Picker Basic Range Calendar Month and Year Selector Presets Date and Time Picker Booked dates Custom Cell Size

Epicenter

Local-first, open source apps

Calendar

A calendar component that allows users to select a date or a range of dates.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

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

Installation

pnpm dlx shadcn-svelte@latest add calendar

npx shadcn-svelte@latest add calendar

npx shadcn-svelte@latest add calendar

bun x shadcn-svelte@latest add calendar

Install `bits-ui` and `@internationalized/date`:

pnpm i bits-ui @internationalized/date -D

npm i bits-ui @internationalized/date -D

yarn install bits-ui @internationalized/date -D

bun install bits-ui @internationalized/date -D

Copy and paste the following code into your project.

<script lang="ts">
  import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
  import CalendarMonthSelect from "./calendar-month-select.svelte";
  import CalendarYearSelect from "./calendar-year-select.svelte";
  import type Calendar from "./calendar.svelte";
  import type { ComponentProps } from "svelte";

  let {
    captionLayout,
    months,
    monthFormat,
    years,
    yearFormat,
    month,
    locale,
    placeholder = $bindable(),
    monthIndex = 0,
  }: {
    captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
    months: ComponentProps<typeof CalendarMonthSelect>["months"];
    monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
    years: ComponentProps<typeof CalendarYearSelect>["years"];
    yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
    month: DateValue;
    placeholder: DateValue | undefined;
    locale: string;
    monthIndex: number;
  } = $props();

  function formatYear(date: DateValue) {
    const dateObj = date.toDate(getLocalTimeZone());
    if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
    return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
  }

  function formatMonth(date: DateValue) {
    const dateObj = date.toDate(getLocalTimeZone());
    if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
    return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
  }
</script>

{#snippet MonthSelect()}
  <CalendarMonthSelect
    {months}
    {monthFormat}
    value={month.month}
    onchange={(e) => {
      if (!placeholder) return;
      const v = Number.parseInt(e.currentTarget.value);
      const newPlaceholder = placeholder.set({ month: v });
      placeholder = newPlaceholder.subtract({ months: monthIndex });
    }}
  />
{/snippet}

{#snippet YearSelect()}
  <CalendarYearSelect {years} {yearFormat} value={month.year} />
{/snippet}

{#if captionLayout === "dropdown"}
  {@render MonthSelect()}
  {@render YearSelect()}
{:else if captionLayout === "dropdown-months"}
  {@render MonthSelect()}
  {#if placeholder}
    {formatYear(placeholder)}
  {/if}
{:else if captionLayout === "dropdown-years"}
  {#if placeholder}
    {formatMonth(placeholder)}
  {/if}
  {@render YearSelect()}
{:else}
  {formatMonth(month)} {formatYear(month)}
{/if}

Usage

<script lang="ts">
  import { getLocalTimeZone, today } from "@internationalized/date";
  import { Calendar } from "$lib/components/ui/calendar/index.js";
 
  let value = $state(today(getLocalTimeZone()));
</script>

<Calendar type="single" bind:value class="rounded-lg border" />

See the Bits UI Calendar documentation for more information.

About

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

Date Picker

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

Basic

A basic calendar component. We used class="rounded-lg border" to style the calendar.

October 2026

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

<script lang="ts">
	import { Calendar } from "$lib/components/ui/calendar/index.js";
</script>
 
<Calendar type="single" class="rounded-lg border" />

Range Calendar

Use the RangeCalendar component to enable range selection.

January 2026

Su	Mo	Tu	We	Th	Fr	Sa
28	29	30	31	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

February 2026

Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

<script lang="ts">
	import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
	import * as Card from "$lib/components/ui/card/index.js";
	import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js";
	import type { DateRange } from "bits-ui";
 
	const start = new CalendarDate(today(getLocalTimeZone()).year, 1, 12);
 
	let value = $state<DateRange | undefined>({
		start,
		end: start.add({ days: 30 }),
	});
</script>
 
<Card.Root class="mx-auto w-fit p-0">
	<Card.Content class="p-0">
		<RangeCalendar
			bind:value
			numberOfMonths={2}
			minValue={new CalendarDate(1900, 1, 1)}
			maxValue={today(getLocalTimeZone())}
		/>
	</Card.Content>
</Card.Root>

Month and Year Selector

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

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

<script lang="ts">
	import { Calendar } from "$lib/components/ui/calendar/index.js";
</script>
 
<Calendar type="single" captionLayout="dropdown" class="rounded-lg border" />

Presets

October 2026

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31
1	2	3	4	5	6	7

<script lang="ts">
	import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
	import * as Card from "$lib/components/ui/card/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
	import { Calendar } from "$lib/components/ui/calendar/index.js";
 
	const presets = [
		{ label: "Today", value: 0 },
		{ label: "Tomorrow", value: 1 },
		{ label: "In 3 days", value: 3 },
		{ label: "In a week", value: 7 },
		{ label: "In 2 weeks", value: 14 },
	];
 
	let value = $state<CalendarDate | undefined>(
		new CalendarDate(today(getLocalTimeZone()).year, 2, 12)
	);
	let placeholder = $state<CalendarDate>(today(getLocalTimeZone()));
</script>
 
<Card.Root class="mx-auto w-fit max-w-[300px]" size="sm">
	<Card.Content>
		<Calendar
			type="single"
			bind:value
			bind:placeholder
			fixedWeeks
			class="p-0 [--cell-size:--spacing(9.5)]"
		/>
	</Card.Content>
	<Card.Footer class="flex flex-wrap gap-2 border-t">
		{#each presets as preset (preset.value)}
			<Button
				variant="outline"
				size="sm"
				class="flex-1"
				onclick={() => {
					const newDate = today(getLocalTimeZone()).add({ days: preset.value });
					value = newDate;
					placeholder = newDate;
				}}
			>
				{preset.label}
			</Button>
		{/each}
	</Card.Footer>
</Card.Root>

Date and Time Picker

October 2026

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

<script lang="ts">
	import Clock2Icon from "@lucide/svelte/icons/clock-2";
	import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
	import * as Card from "$lib/components/ui/card/index.js";
	import * as Field from "$lib/components/ui/field/index.js";
	import * as InputGroup from "$lib/components/ui/input-group/index.js";
	import { Calendar } from "$lib/components/ui/calendar/index.js";
 
	const now = today(getLocalTimeZone());
 
	let value = $state<CalendarDate | undefined>(new CalendarDate(now.year, now.month, 12));
</script>
 
<Card.Root size="sm" class="mx-auto w-fit">
	<Card.Content>
		<Calendar type="single" bind:value class="p-0" />
	</Card.Content>
	<Card.Footer class="border-t bg-card">
		<Field.Group>
			<Field.Field>
				<Field.Label for="time-from">Start Time</Field.Label>
				<InputGroup.Root>
					<InputGroup.Input
						id="time-from"
						type="time"
						step="1"
						value="10:30:00"
						class="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
					/>
					<InputGroup.Addon>
						<Clock2Icon class="text-muted-foreground" />
					</InputGroup.Addon>
				</InputGroup.Root>
			</Field.Field>
			<Field.Field>
				<Field.Label for="time-to">End Time</Field.Label>
				<InputGroup.Root>
					<InputGroup.Input
						id="time-to"
						type="time"
						step="1"
						value="12:30:00"
						class="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
					/>
					<InputGroup.Addon>
						<Clock2Icon class="text-muted-foreground" />
					</InputGroup.Addon>
				</InputGroup.Root>
			</Field.Field>
		</Field.Group>
	</Card.Footer>
</Card.Root>

Booked dates

February 2026

Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

<script lang="ts">
	import { CalendarDate, getLocalTimeZone, today, type DateValue } from "@internationalized/date";
	import * as Card from "$lib/components/ui/card/index.js";
	import { Calendar } from "$lib/components/ui/calendar/index.js";
 
	const year = today(getLocalTimeZone()).year;
 
	let value = $state<CalendarDate | undefined>(new CalendarDate(year, 2, 3));
 
	const bookedDates = Array.from({ length: 15 }, (_, i) => new CalendarDate(year, 2, 12 + i));
 
	function isBooked(date: DateValue) {
		return bookedDates.some((d) => d.compare(date) === 0);
	}
</script>
 
<Card.Root class="mx-auto w-fit p-0">
	<Card.Content class="p-0">
		<Calendar type="single" bind:value isDateUnavailable={isBooked} />
	</Card.Content>
</Card.Root>

Custom Cell Size

Su	Mo	Tu	We	Th	Fr	Sa
29	30	1 $100	2 $100	3 $100	4 $100	5 $120
6 $120	7 $100	8 $100	9 $100	10 $100	11 $100	12 $120
13 $120	14 $100	15 $100	16 $100	17 $100	18 $100	19 $120
20 $120	21 $100	22 $100	23 $100	24 $100	25 $100	26 $120
27 $120	28 $100	29 $100	30 $100	31 $100	1	2

<script lang="ts">
	import { CalendarDate, getLocalTimeZone, isWeekend, today } from "@internationalized/date";
	import * as Card from "$lib/components/ui/card/index.js";
	import RangeCalendarDay from "$lib/components/ui/range-calendar/range-calendar-day.svelte";
	import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js";
	import type { DateRange } from "bits-ui";
 
	const start = new CalendarDate(today(getLocalTimeZone()).year, 12, 8);
 
	let value = $state<DateRange | undefined>({
		start,
		end: start.add({ days: 10 }),
	});
</script>
 
<Card.Root class="mx-auto w-fit p-0">
	<Card.Content class="p-0">
		<RangeCalendar
			bind:value
			captionLayout="dropdown"
			monthFormat="long"
			class="[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
		>
			{#snippet day({ day, outsideMonth })}
				<RangeCalendarDay>
					{day.day}
					{#if !outsideMonth}
						<span>{isWeekend(day, "en-US") ? "$120" : "$100"}</span>
					{/if}
				</RangeCalendarDay>
			{/snippet}
		</RangeCalendar>
	</Card.Content>
</Card.Root>

You can customize the size of calendar cells using the --cell-size CSS variable. You can also make it responsive by using breakpoint-specific values:

<Calendar
  type="single"
  bind:value
  class="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

Or use fixed values:

<Calendar
  type="single"
  bind:value
  class="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

Button Group Card

Epicenter

Calendar

Epicenter

Install bits-ui and @internationalized/date:

Copy and paste the following code into your project.

Install `bits-ui` and `@internationalized/date`: