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

# RangeCalendarCellTrigger

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

> The pressable day button inside a [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root). See also: [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root); delta is that the single `data-selected` state is replaced by paired `data-selection-start` / `data-selection-end` states that paint `--primary` only at the two endpoints, leaving the middle of the range to read through the `--accent` fill that [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root) paints on its cell.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/RangeCalendarCellTrigger.md#theme-key-RangeCalendarCellTrigger-root) | 7 classes | The pressable day button inside a [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root). See also: [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root); delta is that the single `data-selected` state is replaced by paired `data-selection-start` / `data-selection-end` states that paint `--primary` only at the two endpoints, leaving the middle of the range to read through the `--accent` fill that [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root) paints on its cell. |

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

## root

> The pressable day button inside a [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root). See also: [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root); delta is that the single `data-selected` state is replaced by paired `data-selection-start` / `data-selection-end` states that paint `--primary` only at the two endpoints, leaving the middle of the range to read through the `--accent` fill that [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root) paints on its cell.

Default classes:

```text
h-[var(--vueda-cal-day)] w-[var(--vueda-cal-day)] p-0 font-normal data-[selected]:opacity-100
[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground
data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground
data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground
data-[outside-view]:text-muted-foreground
data-[disabled]:text-muted-foreground data-[disabled]:opacity-50
data-[unavailable]:text-destructive data-[unavailable]:line-through
```

Composes: `_ButtonBase.root` `_ButtonGhost.root`

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