Event Date, October - November 2026

October - November 2026

S	M	T	W	T	F	S

S	M	T	W	T	F	S

About

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.

Installation

pnpm dlx kliping@latest add range-calendar

Usage

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

<template>
  <RangeCalendar />
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Kliping items	button
Files	components/ui/range-calendar/range-calendar.vue components/ui/range-calendar/range-calendar-cell.vue components/ui/range-calendar/range-calendar-cell-trigger.vue components/ui/range-calendar/range-calendar-grid.vue components/ui/range-calendar/range-calendar-grid-body.vue components/ui/range-calendar/range-calendar-grid-head.vue components/ui/range-calendar/range-calendar-grid-row.vue components/ui/range-calendar/range-calendar-head-cell.vue components/ui/range-calendar/range-calendar-header.vue components/ui/range-calendar/range-calendar-heading.vue components/ui/range-calendar/range-calendar-next-button.vue components/ui/range-calendar/range-calendar-prev-button.vue components/ui/range-calendar/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<RangeCalendar />

Bagian lain yang tersedia: RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton.

API Reference

RangeCalendar

Prop	Type	Default	Description
defaultPlaceholder?	DateValue	—	The default placeholder date
defaultValue?	DateRange	—	The default value for the calendar
modelValue?	DateRange	—	The controlled selected date range of the calendar. Can be bound as v-model.
placeholder?	DateValue	—	The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
allowNonContiguousRanges?	boolean	—	When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
pagedNavigation?	boolean	—	This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
preventDeselect?	boolean	—	Whether or not to prevent the user from deselecting a date without selecting another date first
maximumDays?	number	—	The maximum number of days that can be selected in a range
weekStartsOn?	WeekStartsOn	—	The day of the week to start the calendar on
weekdayFormat?	WeekDayFormat	—	The format to use for the weekday strings provided via the weekdays slot prop
calendarLabel?	string	—	The accessible label for the calendar
fixedWeeks?	boolean	—	Whether or not to always display 6 weeks in the calendar
maxValue?	DateValue	—	The maximum date that can be selected
minValue?	DateValue	—	The minimum date that can be selected
locale?	string	—	The locale to use for formatting dates
numberOfMonths?	number	—	The number of months to display at once
disabled?	boolean	—	Whether or not the calendar is disabled
readonly?	boolean	—	Whether or not the calendar is readonly
initialFocus?	boolean	—	If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
isDateDisabled?	Matcher	—	A function that returns whether or not a date is disabled
isDateUnavailable?	Matcher	—	A function that returns whether or not a date is unavailable
isDateHighlightable?	Matcher	—	A function that returns whether or not a date is hightable
dir?	Direction	—	The reading direction of the calendar when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
nextPage?	((placeholder: DateValue) => DateValue)	—	A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
prevPage?	((placeholder: DateValue) => DateValue)	—	A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
disableDaysOutsideCurrentView?	boolean	—	Whether or not to disable days outside the current view.
fixedDate?	"start" | "end"	—	Which part of the range should be fixed
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@update:modelValue	[date: DateRange]	Emitted when the value changes.
@update:placeholder	[date: DateValue]	Emitted when the placeholder date (the month in view) changes.
@update:validModelValue	[date: DateRange]	Emitted with the range once both ends are picked and valid.
@update:startValue	[date: DateValue | undefined]	Emitted when the first date of the range is picked, before the range is complete.

Data attribute	Value
[data-slot]	"range-calendar"

RangeCalendarCell

Prop	Type	Default	Description
date	DateValue	—	The date this cell represents.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-cell"
[data-selected]	set at runtime
[data-selection-end]	set at runtime
[data-selection-start]	set at runtime

RangeCalendarCellTrigger

Prop	Type	Default	Description
day	DateValue	—	The date this button selects.
month	DateValue	—	The month shown in the grid; days outside it get data-outside-view.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"button"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-trigger"
[data-today]	set at runtime
[data-selected]	set at runtime
[data-selection-start]	set at runtime
[data-selection-end]	set at runtime

RangeCalendarGrid

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-grid"

RangeCalendarGridBody

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-grid-body"

RangeCalendarGridHead

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-grid-head"

RangeCalendarGridRow

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-grid-row"

RangeCalendarHeadCell

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-head-cell"

RangeCalendarHeader

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-header"

RangeCalendarHeading

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	{ headingValue: string; }

Data attribute	Value
[data-slot]	"range-calendar-heading"

RangeCalendarNextButton

Prop	Type	Default	Description
nextPage?	((placeholder: DateValue) => DateValue)	—	The function to be used for the next page. Overwrites the nextPage function set on the RangeCalendarRoot.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-next-button"

RangeCalendarPrevButton

Prop	Type	Default	Description
prevPage?	((placeholder: DateValue) => DateValue)	—	The function to be used for the prev page. Overwrites the prevPage function set on the RangeCalendarRoot.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"range-calendar-prev-button"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI RangeCalendar yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Tab	When focus moves onto the calendar, focuses the first navigation button.
Space	When the focus is on either RangeCalendarNext or RangeCalendarPrev, it navigates the calendar. Otherwise, it selects the date.
Enter	When the focus is on either RangeCalendarNext or RangeCalendarPrev, it navigates the calendar. Otherwise, it selects the date.
ArrowLeft + ArrowRight + ArrowUp + ArrowDown	When the focus is on RangeCalendarCellTrigger, it navigates the dates, changing the month/year/decade if necessary.
Home	When the focus is on RangeCalendarCellTrigger, it moves focus to the first day of the current week.
End	When the focus is on RangeCalendarCellTrigger, it moves focus to the last day of the current week.
PageUp	When the focus is on RangeCalendarCellTrigger, it moves to the previous month while preserving the day of the month when possible, or clamps to the last day of the month.
PageDown	When the focus is on RangeCalendarCellTrigger, it moves to the next month while preserving the day of the month when possible, or clamps to the last day of the month.
Shift+PageUp	When the focus is on RangeCalendarCellTrigger, it moves to the previous year while preserving the month and day when possible, or clamps to the last day of the month.
Shift+PageDown	When the focus is on RangeCalendarCellTrigger, it moves to the next year while preserving the month and day when possible, or clamps to the last day of the month.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --destructive-foreground, --muted-foreground, --primary, --primary-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.