range-calendar

Range Calendar

Lets the shopper pick a start and an end date from one or more months, within a minimum and maximum and up to a set number of days.

States: Default, Hover, Focus, Disabled, Invalid

Parts

Part	File	Does
RangeCalendar	RangeCalendar.vue	Lets the user pick a start and end date from one or more months.
RangeCalendarCell	RangeCalendarCell.vue	Holds one day of the range calendar grid.
RangeCalendarCellTrigger	RangeCalendarCellTrigger.vue	Lets the user select a day as part of the date range.
RangeCalendarGrid	RangeCalendarGrid.vue	Holds the weekday names and days of one month.
RangeCalendarGridBody	RangeCalendarGridBody.vue	Holds the week rows of one month.
RangeCalendarGridHead	RangeCalendarGridHead.vue	Holds the row of weekday names above the days.
RangeCalendarGridRow	RangeCalendarGridRow.vue	Groups the cells of one week, or the weekday names.
RangeCalendarHeadCell	RangeCalendarHeadCell.vue	Labels one weekday above its column of days.
RangeCalendarHeader	RangeCalendarHeader.vue	Groups the heading with the buttons that change the month.
RangeCalendarHeading	RangeCalendarHeading.vue	Shows the month and year currently displayed.
RangeCalendarNextButton	RangeCalendarNextButton.vue	Moves the range calendar to the next month.
RangeCalendarPrevButton	RangeCalendarPrevButton.vue	Moves the range calendar to the previous month.

Anatomy

<RangeCalendar>
  <RangeCalendarHeader>
    <RangeCalendarHeading />
    <RangeCalendarPrevButton />
    <RangeCalendarNextButton />
  </RangeCalendarHeader>
  <RangeCalendarGrid>
    <RangeCalendarGridHead>
      <RangeCalendarGridRow>
        <RangeCalendarHeadCell />
      </RangeCalendarGridRow>
    </RangeCalendarGridHead>
    <RangeCalendarGridBody>
      <RangeCalendarGridRow>
        <RangeCalendarCell>
          <RangeCalendarCellTrigger />
        </RangeCalendarCell>
      </RangeCalendarGridRow>
    </RangeCalendarGridBody>
  </RangeCalendarGrid>
</RangeCalendar>

Styling

Part	Recipe
RangeCalendar	range-calendar
RangeCalendarCell	range-calendar-cell
RangeCalendarCellTrigger	range-calendar-cell-trigger
RangeCalendarGridRow	range-calendar-grid-row
RangeCalendarHeadCell	range-calendar-head-cell
RangeCalendarHeader	range-calendar-header
RangeCalendarHeading	range-calendar-heading
RangeCalendarNextButton	range-calendar-nav
RangeCalendarPrevButton	range-calendar-nav

Install

Writes 13 files into components/ui/range-calendar/. For agents, npx @frontic/ui docs range-calendar prints this reference as markdown; the MCP server serves the same.

npm packages: @internationalized/date; @lucide/vue; @vueuse/core; class-variance-authority; reka-ui

API reference

RangeCalendar RangeCalendar.vue

Lets the user pick a start and end date from one or more months. Renders a <div>.

Prop	Type	Default
defaultPlaceholder	DateValue	—

defaultValue	DateRange	—

modelValue	DateRange \| null	—

placeholder	DateValue	—

allowNonContiguousRanges	boolean	false

pagedNavigation	boolean	false

preventDeselect	boolean	false

maximumDays	number	—

weekStartsOn	WeekStartsOn	—

weekdayFormat	WeekDayFormat	'narrow'

calendarLabel	string	—

fixedWeeks	boolean	false

maxValue	DateValue	—

minValue	DateValue	—

locale	string	—

numberOfMonths	number	1

disabled	boolean	false

readonly	boolean	false

initialFocus	boolean	false

isDateDisabled	Matcher	—

isDateUnavailable	Matcher	—

isDateHighlightable	Matcher	—

dir	Direction	—

nextPage	((placeholder: DateValue) => DateValue)	—

prevPage	((placeholder: DateValue) => DateValue)	—

disableDaysOutsideCurrentView	boolean	false

fixedDate	'start' \| 'end'	—

asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

Event	Payload
update:modelValue	date: DateRange

update:placeholder	date: DateValue

update:startValue	date: DateValue \| undefined

update:validModelValue	date: DateRange

Data attribute	Values
data-disabled	—

data-invalid	—

data-readonly	—

Recipe range-calendar	Sets
base: range-calendar	1 property

Parts

Anatomy

Styling

Install

API reference

RangeCalendar RangeCalendar.vue

RangeCalendarCell RangeCalendarCell.vue

RangeCalendarCellTrigger RangeCalendarCellTrigger.vue

RangeCalendarGrid RangeCalendarGrid.vue

RangeCalendarGridBody RangeCalendarGridBody.vue

RangeCalendarGridHead RangeCalendarGridHead.vue

RangeCalendarGridRow RangeCalendarGridRow.vue

RangeCalendarHeadCell RangeCalendarHeadCell.vue

RangeCalendarHeader RangeCalendarHeader.vue

RangeCalendarHeading RangeCalendarHeading.vue

RangeCalendarNextButton RangeCalendarNextButton.vue

RangeCalendarPrevButton RangeCalendarPrevButton.vue