---
title: "RangeCalendar"
description: "Presents a calendar view tailored for selecting date ranges."
canonical_url: "https://vinicunca.dev/akar/components/range-calendar"
---
# RangeCalendar

> Presents a calendar view tailored for selecting date ranges.

## Range Calendar

`````vue [index.vue]
<script setup lang="ts">
import type { RangeCalendarRootProps } from 'akar'
import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot } from 'akar'

import './styles.css'

const isDateUnavailable: RangeCalendarRootProps['isDateUnavailable'] = (date) => {
  return date.day === 17 || date.day === 18
}
</script>

<template>
  <div class="akar-demo akar-demo-RangeCalendar">
    <RangeCalendarRoot
        v-slot="{ weekDays, grid }"
        :is-date-unavailable="isDateUnavailable"
        class="Calendar"
        fixed-weeks
      >
        <RangeCalendarHeader class="flex items-center justify-between">
          <RangeCalendarPrev
            class="CalendarNavButton"
          >
            <PIcon
              name="i-lucide-chevron-left"
              class="Icon"
            />
          </RangeCalendarPrev>
          <RangeCalendarHeading class="CalendarHeading" />
          <RangeCalendarNext
            class="CalendarNavButton"
          >
            <PIcon
              name="i-lucide-chevron-right"
              class="Icon"
            />
          </RangeCalendarNext>
        </RangeCalendarHeader>
        <div
          class="CalendarWrapper"
        >
          <RangeCalendarGrid
            v-for="month in grid"
            :key="month.value.toString()"
            class="CalendarGrid"
          >
            <RangeCalendarGridHead>
              <RangeCalendarGridRow class="CalendarGridRow">
                <RangeCalendarHeadCell
                  v-for="day in weekDays"
                  :key="day"
                  class="CalendarHeadCell"
                >
                  {{ day }}
                </RangeCalendarHeadCell>
              </RangeCalendarGridRow>
            </RangeCalendarGridHead>
            <RangeCalendarGridBody class="grid">
              <RangeCalendarGridRow
                v-for="(weekDates, index) in month.rows"
                :key="`weekDate-${index}`"
                class="CalendarGridRow"
              >
                <RangeCalendarCell
                  v-for="weekDate in weekDates"
                  :key="weekDate.toString()"
                  :date="weekDate"
                  class="CalendarCell"
                >
                  <RangeCalendarCellTrigger
                    :day="weekDate"
                    :month="month.value"
                    class="CalendarCellTrigger"
                  />
                </RangeCalendarCell>
              </RangeCalendarGridRow>
            </RangeCalendarGridBody>
          </RangeCalendarGrid>
        </div>
      </RangeCalendarRoot>
  </div>
</template>
```

```css [styles.css]
@import '../_colors/black-alpha.css';
@import '../_colors/grass.css';

@scope (.akar-demo-RangeCalendar) {
.Calendar {
  margin-top: 1.5rem;
  border-width: 1px;
  border-color: #000000;
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 22px;
}

.CalendarHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.CalendarNavButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #000000;
  background-color: transparent;
  cursor: pointer;
}

.CalendarNavButton:hover {
  color: #ffffff;
  background-color: #000000;
}

.CalendarHeading {
  font-weight: 500;
  color: #000000;
  color: 15px;
}

.CalendarWrapper {
  display: flex;
  padding-top: 1rem;
  margin-top: 1rem;
  flex-direction: column;
}

@media (min-width: 640px) {
  .CalendarWrapper {
    margin-left: 1rem;
    margin-top: 0;
    flex-direction: row;
  }
}

.CalendarGrid {
  margin-top: 0.25rem;
  width: 100%;
  user-select: none;
  border-collapse: collapse;
}

.CalendarGridRow {
  display: grid;
  margin-bottom: 0.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.CalendarGridRow[data-reka-calendar-month-view] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.CalendarHeadCell {
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #000000;
  font-weight: 400;
}

.CalendarCell {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  padding: 0 !important;
}

.CalendarCellTrigger {
  display: flex;
  position: relative;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-color: transparent;
  outline-style: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: #000000;
  white-space: nowrap;
  background-color: transparent;
}

.CalendarCellTrigger:hover {
  border-color: #000000;
}

.CalendarCellTrigger:focus {
  box-shadow: 0 0 0 2px #000000;
}

.CalendarCellTrigger[data-disabled] {
  cursor: none;
  color: rgba(0,0,0,0.3);
}

.CalendarCellTrigger[data-selected] {
  background-color: #000000;
  color: #ffffff;
  font-weight: 500;
}

.CalendarCellTrigger[data-selected]::before {
  background-color: #FFFFFF;
}

.CalendarCellTrigger[data-unavailable] {
  color: rgba(0,0,0,0.3);
  text-decoration: line-through;
}

.CalendarCellTrigger::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: #FFFFFF;
}

.CalendarCellTrigger[data-today]::before {
  display: block;
  background-color: var(--grass-9);
}

.CalendarCellTrigger[data-selected:not(data-selection-start):not(data-selection-end)] {
  background-color: rgba(0, 0, 0, 0.3);
}

.CalendarCellTrigger[data-highlighted] {
  background-color: var(--grass-9);
  color: var(--grass-1);
  border-radius:0;
}

.CalendarCellTrigger[data-selection-start] {
  background-color: #000000;
  border-radius: 0;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

.CalendarCellTrigger[data-selection-end] {
  background-color: #000000;
  border-radius: 0;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
}
}
```

## Features

- Full keyboard navigation
- Can be controlled or uncontrolled
- Focus is fully managed
- Localization support
- Highly composable

## Preface

The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

## Installation

Install the date package.

```bash [pnpm]
pnpm add @internationalized/date
```

```bash [yarn]
yarn add @internationalized/date
```

```bash [npm]
npm install @internationalized/date
```

```bash [bun]
bun add @internationalized/date
```

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  RangeCalendarCell,
  RangeCalendarCellTrigger,
  RangeCalendarGrid,
  RangeCalendarGridBody,
  RangeCalendarGridHead,
  RangeCalendarGridRow,
  RangeCalendarHeadCell,
  RangeCalendarHeader,
  RangeCalendarHeading,
  RangeCalendarNext,
  RangeCalendarPrev,
  RangeCalendarRoot,
} from 'akar';
</script>

<template>
  <RangeCalendarRoot>
    <RangeCalendarHeader>
      <RangeCalendarPrev />
      <RangeCalendarHeading />
      <RangeCalendarNext />
    </RangeCalendarHeader>
    <RangeCalendarGrid>
      <RangeCalendarGridHead>
        <RangeCalendarGridRow>
          <RangeCalendarHeadCell />
        </RangeCalendarGridRow>
      </RangeCalendarGridHead>
      <RangeCalendarGridBody>
        <RangeCalendarGridRow>
          <RangeCalendarCell>
            <RangeCalendarCellTrigger />
          </RangeCalendarCell>
        </RangeCalendarGridRow>
      </RangeCalendarGridBody>
    </RangeCalendarGrid>
  </RangeCalendarRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a calendar

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `allowNonContiguousRanges` | `false` | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |
| `calendarLabel` |  | `string` | The accessible label for the calendar |
| `defaultPlaceholder` |  | `DateValue` | The default placeholder date |
| `defaultValue` | `{ start: undefined, end: undefined }` | `DateRange` | The default value for the calendar |
| `dir` |  | `"ltr" \| "rtl"` | The reading direction of the calendar when applicable.<br><br>If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
| `disabled` | `false` | `boolean` | Whether or not the calendar is disabled |
| `disableDaysOutsideCurrentView` | `false` | `boolean` | Whether or not to disable days outside the current view. |
| `fixedDate` |  | `"start" \| "end"` | Which part of the range should be fixed |
| `fixedWeeks` | `false` | `boolean` | Whether or not to always display 6 weeks in the calendar |
| `initialFocus` | `false` | `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 |
| `isDateHighlightable` |  | `Matcher` | A function that returns whether or not a date is hightable |
| `isDateUnavailable` |  | `Matcher` | A function that returns whether or not a date is unavailable |
| `locale` |  | `string` | The locale to use for formatting dates |
| `maximumDays` |  | `number` | The maximum number of days that can be selected in a range |
| `maxValue` |  | `DateValue` | The maximum date that can be selected |
| `minValue` |  | `DateValue` | The minimum date that can be selected |
| `modelValue` |  | `DateRange \| null` | The controlled selected date range of the calendar. Can be bound as `v-model`. |
| `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. |
| `numberOfMonths` | `1` | `number` | The number of months to display at once |
| `pagedNavigation` | `false` | `boolean` | This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month |
| `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 |
| `preventDeselect` | `false` | `boolean` | Whether or not to prevent the user from deselecting a date without selecting another date first |
| `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. |
| `readonly` | `false` | `boolean` | Whether or not the calendar is readonly |
| `weekdayFormat` | `"narrow"` | `"narrow" \| "short" \| "long"` | The format to use for the weekday strings provided via the weekdays slot prop |
| `weekStartsOn` |  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | The day of the week to start the calendar on |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `date: DateRange` | Event handler called whenever the model value changes |
| `update:placeholder` | `date: DateValue` | Event handler called whenever the placeholder value changes |
| `update:startValue` | `date: DateValue` | Event handler called whenever the start value changes |
| `update:validModelValue` | `date: DateRange` | Event handler called whenever there is a new validModel |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `date` | `DateValue` | The current date of the placeholder |
| `grid` | `Grid<DateValue>[]` | The grid of dates |
| `weekDays` | `string[]` | The days of the week |
| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | The start of the week |
| `locale` | `string` | The calendar locale |
| `fixedWeeks` | `boolean` | Whether or not to always display 6 weeks in the calendar |
| `modelValue` | `DateRange` | The current date range |

[RangeCalendarRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarRoot.vue)

| Data attribute | Value |
| --- | --- |
| `[data-readonly]` | Present when readonly |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |

### Header

Contains the navigation buttons and the heading segments.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[RangeCalendarHeader.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarHeader.vue)

### Prev Button

Calendar navigation button. It navigates the calendar one month/year/decade in the past based on the current calendar view.

| Data attribute | Value |
| --- | --- |
| `[data-disabled]` | Present when disabled |

**Props**

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

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `disabled` | `boolean` | Current disable state |

[RangeCalendarPrev.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarPrev.vue)

### Next Button

Calendar navigation button. It navigates the calendar one month/year/decade in the future based on the current calendar view.

**Props**

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

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `disabled` | `boolean` | Current disable state |

[RangeCalendarNext.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarNext.vue)

| Data attribute | Value |
| --- | --- |
| `[data-disabled]` | Present when disabled |

### Heading

Heading for displaying the current month and year.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `headingValue` | `string` | Current month and year |

[RangeCalendarHeading.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarHeading.vue)

| Data attribute | Value |
| --- | --- |
| `[data-disabled]` | Present when disabled |

### Grid

Container for wrapping the calendar grid.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"table"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[RangeCalendarGrid.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarGrid.vue)

| Data attribute | Value |
| --- | --- |
| `[data-readonly]` | Present when readonly |
| `[data-disabled]` | Present when disabled |

### Grid Head

Container for wrapping the grid head.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"thead"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[RangeCalendarGridHead.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarGridHead.vue)

### Grid Body

Container for wrapping the grid body.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"tbody"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[RangeCalendarGridBody.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarGridBody.vue)

### Grid Row

Container for wrapping the grid row.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"tr"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[RangeCalendarGridRow.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarGridRow.vue)

### Head Cell

Container for wrapping the head cell. Used for displaying the week days.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"th"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[RangeCalendarHeadCell.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarHeadCell.vue)

### Cell

Container for wrapping the calendar cells.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"td"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |
| `date*` |  | `DateValue` |  |

[RangeCalendarCell.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarCell.vue)

| Data attribute | Value |
| --- | --- |
| `[data-disabled]` | Present when disabled |

### Cell Trigger

Interactable container for displaying the cell dates. Clicking it selects the date.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |
| `day*` |  | `DateValue` |  |
| `month*` |  | `DateValue` |  |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `dayValue` | `string` | Current day |
| `disabled` | `boolean` | Current disable state |
| `selected` | `boolean` | Current selected state |
| `today` | `boolean` | Current today state |
| `outsideView` | `boolean` | Current outside view state |
| `outsideVisibleView` | `boolean` | Current outside visible view state |
| `unavailable` | `boolean` | Current unavailable state |
| `highlighted` | `boolean` | Current highlighted state |
| `highlightedStart` | `boolean` | Current highlighted start state |
| `highlightedEnd` | `boolean` | Current highlighted end state |
| `selectionStart` | `boolean` | Current selection start state |
| `selectionEnd` | `boolean` | Current selection end state |

[RangeCalendarCellTrigger.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue)

| Data attribute | Value |
| --- | --- |
| `[data-selected]` | Present when selected |
| `[data-value]` | The ISO string value of the date. |
| `[data-disabled]` | Present when disabled |
| `[data-unavailable]` | Present when unavailable |
| `[data-today]` | Present when today |
| `[data-outside-view]` | Present when the date is outside the current month it is displayed in. |
| `[data-outside-visible-view]` | Present when the date is outside the months that are visible on the calendar. |
| `[data-selection-start]` | Present when the date is the start of the selection. |
| `[data-selection-end]` | Present when the date is the end of the selection. |
| `[data-highlighted]` | Present when the date is highlighted by the user as they select a range. |
| `[data-highlighted-start]` | Present when the date is the start of the range that is highlighted by the user. |
| `[data-highlighted-end]` | Present when the date is the end of the range that is highlighted by the user. |
| `[data-focused]` | Present when focused |

## Accessibility

### Keyboard Interactions

| Key | Description |
| --- | --- |
| <kbd>Tab</kbd> | When focus moves onto the calendar, focuses the first navigation button. |
| <kbd>Space</kbd> |  When the focus is on either `RangeCalendarNext` or `RangeCalendarPrev`, it navigates the calendar. Otherwise, it selects the date.  |
| <kbd>Enter</kbd> |  When the focus is on either `RangeCalendarNext` or `RangeCalendarPrev`, it navigates the calendar. Otherwise, it selects the date.  |
| <kbd>ArrowLeft</kbd> / <kbd>ArrowRight</kbd> / <kbd>ArrowUp</kbd> / <kbd>ArrowDown</kbd> | When the focus is on `RangeCalendarCellTrigger`, it navigates the dates, changing the month/year/decade if necessary. |
| <kbd>Home</kbd> | When the focus is on `RangeCalendarCellTrigger`, it moves focus to the first day of the current week. |
| <kbd>End</kbd> | When the focus is on `RangeCalendarCellTrigger`, it moves focus to the last day of the current week. |
| <kbd>PageUp</kbd> | 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. |
| <kbd>PageDown</kbd> | 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. |
| <kbd>Shift+PageUp</kbd> | 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. |
| <kbd>Shift+PageDown</kbd> | 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. |

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RangeCalendar)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.