이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Range Calendar

Previous Next

사용자가 날짜 범위를 선택할 수 있는 캘린더 컴포넌트입니다.

Docs API Reference
February 2026
SuMoTuWeThFrSa
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 { 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" />

소개

<RangeCalendar /> 컴포넌트는 Bits Range Calendar 컴포넌트를 기반으로 구축되었으며, 날짜 처리를 위해 @internationalized/date 패키지를 사용합니다.

블록

30개 이상의 캘린더 블록에서 RangeCalendar 컴포넌트가 실제로 사용되는 것을 확인할 수 있습니다.

설치

pnpm dlx shadcn-svelte@latest add range-calendar