---
url: "https://vueda.dev/v3/reference/theming/keys/RangeCalendarCell.md"
title: "RangeCalendarCell"
---

# RangeCalendarCell

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> A grid slot inside a [RangeCalendarGridRow.root](/v3/reference/theming/keys/RangeCalendarGridRow.md#theme-key-RangeCalendarGridRow-root). Same `p-0` plus `relative` plus `focus-within:z-20` layout shape as [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root), plus the range-fill recipe: `[&:has([data-selected])]:bg-accent` paints `--accent` on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the `data-selection-start` and `data-selection-end` cells round only their outer corners via the `[&:has([data-selected][data-selection-start])]` / `[&:has([data-selected][data-selection-end])]` variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints.

Vue component: [RangeCalendarCell](/v3/reference/api/vue/RangeCalendarCell.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root) | 3 classes | A grid slot inside a [RangeCalendarGridRow.root](/v3/reference/theming/keys/RangeCalendarGridRow.md#theme-key-RangeCalendarGridRow-root). Same `p-0` plus `relative` plus `focus-within:z-20` layout shape as [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root), plus the range-fill recipe: `[&:has([data-selected])]:bg-accent` paints `--accent` on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the `data-selection-start` and `data-selection-end` cells round only their outer corners via the `[&:has([data-selected][data-selection-start])]` / `[&:has([data-selected][data-selection-end])]` variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints. |

<a id="theme-key-RangeCalendarCell-root"></a>

## root

> A grid slot inside a [RangeCalendarGridRow.root](/v3/reference/theming/keys/RangeCalendarGridRow.md#theme-key-RangeCalendarGridRow-root). Same `p-0` plus `relative` plus `focus-within:z-20` layout shape as [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root), plus the range-fill recipe: `[&:has([data-selected])]:bg-accent` paints `--accent` on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the `data-selection-start` and `data-selection-end` cells round only their outer corners via the `[&:has([data-selected][data-selection-start])]` / `[&:has([data-selected][data-selection-end])]` variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints.

Default classes:

```text
relative p-0 text-center text-sm focus-within:relative focus-within:z-20
[&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-vueda-cal-day last:[&:has([data-selected])]:rounded-r-vueda-cal-day
[&:has([data-selected][data-selection-end])]:rounded-r-vueda-cal-day [&:has([data-selected][data-selection-start])]:rounded-l-vueda-cal-day
```

Source: `client/lib/theme/vueda-tailwind/controls/RangeCalendarCell.theme.js:18`