Range Calendar

Tampilan kalender yang dirancang khusus untuk memilih rentang tanggal.

Event Date, August - September 2026

August - September 2026

S	M	T	W	T	F	S

S	M	T	W	T	F	S

<script setup lang="ts">
import type { Ref } from 'vue'
import { ref } from 'vue'
import type { DateRange } from 'reka-ui'
import { getLocalTimeZone, today } from '@internationalized/date'
import { RangeCalendar } from '@/components/ui/range-calendar'

const start = today(getLocalTimeZone())
const end = start.add({ days: 7 })

const dateRange = ref({
  start,
  end,
}) as Ref<DateRange>
</script>

<template>
  <RangeCalendar
    v-model="dateRange"
    class="rounded-md border shadow-sm"
    :number-of-months="2"
    disable-days-outside-current-view
  />
</template>

Tentang

Komponen <RangeCalendar /> dibangun di atas Range Calendar milik Reka UI, yang memakai paket @internationalized/date untuk mengurus tanggal.

Kalau yang Anda butuhkan kalender biasa, lihat komponen Calendar.

Instalasi

CLI

npx shadcn-vue@latest add range-calendar

Manual

Pasang dependensi berikut:

npm install reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";
</script>

<template>
  <RangeCalendar />
</template>