Skip to content
Kura

Range Calendar

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

Docs API Source
July 2026
SuMoTuWeThFrSa
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
<script lang="ts">
  import { getLocalTimeZone, today } from "@internationalized/date";
  import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js";
 
  const start = today(getLocalTimeZone());
  const end = start.add({ days: 7 });
 
  let value = $state({
    start,
    end
  });
</script>
 
<RangeCalendar bind:value class="rounded-md border" />

About

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

Blocks

Installation 

pnpm dlx jsrepo@latest add range-calendar