Range Calendar

Choose an inclusive date range directly in an always-visible calendar grid.

Usage

Booking

Choose an inclusive start and end date for a reservation.

<!-- Range Calendar / Booking -->
<script setup lang="ts">
import { RangeCalendarRoot, RangeCalendarContent, RangeCalendarPreviousMonth, RangeCalendarNextMonth, RangeCalendarGrid, RangeCalendarCell } from '@sectile/vue/range-calendar'
const stay = {
  start: { year: 2026, month: 8, day: 22 },
  end: { year: 2026, month: 8, day: 25 },
}

</script>

<template>
  <RangeCalendarRoot :default-value="stay" v-slot="{ dates, view }">
    <RangeCalendarContent>
      <header>
        <RangeCalendarPreviousMonth aria-label="Previous month">‹</RangeCalendarPreviousMonth>
        <strong>{{ view.year }}-{{ String(view.month).padStart(2, '0') }}</strong>
        <RangeCalendarNextMonth aria-label="Next month">›</RangeCalendarNextMonth>
      </header>
      <RangeCalendarGrid>
        <RangeCalendarCell v-for="day in dates.flat()" :key="JSON.stringify(day)" :value="day">
          {{ day.day }}
        </RangeCalendarCell>
      </RangeCalendarGrid>
    </RangeCalendarContent>
  </RangeCalendarRoot>
</template>

Bounded

Reject values outside the configured minimum and maximum.

<!-- Range Calendar / Bounded -->
<script setup lang="ts">
import { RangeCalendarRoot, RangeCalendarContent, RangeCalendarPreviousMonth, RangeCalendarNextMonth, RangeCalendarGrid, RangeCalendarCell } from '@sectile/vue/range-calendar'
const stay = {
  start: { year: 2026, month: 8, day: 22 },
  end: { year: 2026, month: 8, day: 25 },
}

</script>

<template>
  <RangeCalendarRoot :default-value="stay" v-slot="{ dates, view }">
    <RangeCalendarContent>
      <header>
        <RangeCalendarPreviousMonth aria-label="Previous month">‹</RangeCalendarPreviousMonth>
        <strong>{{ view.year }}-{{ String(view.month).padStart(2, '0') }}</strong>
        <RangeCalendarNextMonth aria-label="Next month">›</RangeCalendarNextMonth>
      </header>
      <RangeCalendarGrid>
        <RangeCalendarCell v-for="day in dates.flat()" :key="JSON.stringify(day)" :value="day">
          {{ day.day }}
        </RangeCalendarCell>
      </RangeCalendarGrid>
    </RangeCalendarContent>
  </RangeCalendarRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Range Calendar / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { RangeCalendarRoot, RangeCalendarContent, RangeCalendarPreviousMonth, RangeCalendarNextMonth, RangeCalendarGrid, RangeCalendarCell } from '@sectile/vue/range-calendar'
const stay = {
  start: { year: 2026, month: 8, day: 22 },
  end: { year: 2026, month: 8, day: 25 },
}


const value = ref(stay)
</script>

<template>
  <RangeCalendarRoot v-model="value" v-slot="{ dates, view }">
    <RangeCalendarContent>
      <header>
        <RangeCalendarPreviousMonth aria-label="Previous month">‹</RangeCalendarPreviousMonth>
        <strong>{{ view.year }}-{{ String(view.month).padStart(2, '0') }}</strong>
        <RangeCalendarNextMonth aria-label="Next month">›</RangeCalendarNextMonth>
      </header>
      <RangeCalendarGrid>
        <RangeCalendarCell v-for="day in dates.flat()" :key="JSON.stringify(day)" :value="day">
          {{ day.day }}
        </RangeCalendarCell>
      </RangeCalendarGrid>
    </RangeCalendarContent>
  </RangeCalendarRoot>
</template>

API

Vue package: @sectile/vue/temporal/range-calendar

Components

RangeCalendarRoot
RangeCalendarContent
RangeCalendarGrid
RangeCalendarCell
RangeCalendarPreviousMonth
RangeCalendarNextMonth
RangeCalendarPreviousYear
RangeCalendarNextYear

Props

`RangeCalendarRootProps`

as: TypePrimitiveAsDefaultundefined
Element or component rendered for this part.
asChild: TypebooleanDefaultundefined
Whether to merge this part into its single child instead of rendering a wrapper.
defaultHighlightedValue: TypeDateValueDefaultundefined
Initially highlighted value for uncontrolled state.
defaultOpen: TypebooleanDefaultfalse
Initial uncontrolled open state.
defaultValue: TypeDateRange | nullDefaultnull
Initial value used when the component owns its state.
defaultView: TypePickerRootSlotProps['viewMode']Default'month'
Initial calendar or picker view.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
highlightedValue: TypeDateValueDefaultundefined
Value currently highlighted for keyboard interaction.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: TypeDateRange | nullDefaultundefined
Current value when state is controlled by the parent.
open: TypebooleanDefaultundefined
Whether the associated popup or disclosure is open.
policies: TypeDateRangePickerOptions['policies']Defaultundefined
Behavior policies that customize validation, movement, or selection.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
referenceDate: TypeDateValueDefaultundefined
Deterministic civil date used when a calendar has no selected or highlighted value.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.

`RangeCalendarPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`RangeCalendarRootSlotProps`

dates: Typereadonly (readonly DateValue[])[]
Dates projected by the active view.
disabled: Typeboolean
Whether interaction is unavailable.
highlightedValue: TypeDateValue
Value currently highlighted for interaction.
months: Typereadonly (readonly CalendarMonthValue[])[]
Months projected by the active view.
open: Typeboolean
Whether the associated popup or disclosure is open.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: TypeValue
Current value exposed by this contract.
view: Type{ readonly year: number; readonly month: number }
Current calendar anchor.
viewMode: TypeCalendarViewMode
Active calendar view mode.
years: Typereadonly (readonly PickerYearValue[])[]
Years projected by the active view.

`RangeCalendarCellSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
inRange: Typeboolean
Whether this value lies inside the selected range.
outsideMonth: Typeboolean
Whether this date belongs to an adjacent month.
selected: Typeboolean
Whether this item is selected.
value: TypeDateValue
Current value exposed by this contract.

Other types

`RangeCalendarValueChangeHandler`

type RangeCalendarValueChangeHandler = NonNullable<InstanceType<typeof RangeCalendarRoot>['$props']['onUpdate:modelValue']>

`RangeCalendarOpenChangeHandler`

type RangeCalendarOpenChangeHandler = NonNullable<InstanceType<typeof RangeCalendarRoot>['$props']['onUpdate:open']>

`RangeCalendarHighlightedValueChangeHandler`

type RangeCalendarHighlightedValueChangeHandler = NonNullable<InstanceType<typeof RangeCalendarRoot>['$props']['onUpdate:highlightedValue']>

`DateRange`

Name	Type	Required
`start`	`DateValue`	Yes
`end`	`DateValue`	Yes

`DateValue`

Name	Type	Required
`year`	`number`	Yes
`month`	`number`	Yes
`day`	`number`	Yes

Parts

Shared scope: [data-scope="range-calendar"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—
`grid`	`[data-part="grid"]`	Groups cells into a navigable two-dimensional structure.	—
`cell`	`[data-part="cell"]`	Represents one navigable or selectable grid value.	—
`previous-month`	`[data-part="previous-month"]`	Moves to the previous month.	—
`next-month`	`[data-part="next-month"]`	Moves to the next month.	—
`previous-year`	`[data-part="previous-year"]`	Moves to the previous year.	—
`next-year`	`[data-part="next-year"]`	Moves to the next year.	—

Keyboard interaction

Key	Behavior
`Arrow keys`	Move the highlighted date by one day or one week.
`Home` / `End`	Move to the start or end of the week.
`Page Up` / `Page Down`	Move by one month; hold Shift to move by one year.
`Enter` / `Space`	Select the highlighted date.
`Escape`	Close the calendar without selecting another date.

Accessibility

The always-visible grid exposes both range endpoints and every date between them without a popup trigger.

Range Calendar ​

Usage ​

Booking ​

Bounded ​

Controlled ​

API ​

Props ​

RangeCalendarRootProps ​

RangeCalendarPartProps ​

Slots ​

RangeCalendarRootSlotProps ​

RangeCalendarCellSlotProps ​

Other types ​

RangeCalendarValueChangeHandler ​

RangeCalendarOpenChangeHandler ​

RangeCalendarHighlightedValueChangeHandler ​

DateRange ​

DateValue ​

Parts ​

Keyboard interaction ​

Accessibility ​