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

# CalendarCell

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

> A grid slot inside a [CalendarGridRow.root](/v3/reference/theming/keys/CalendarGridRow.md#theme-key-CalendarGridRow-root); the [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) day button sits inside it. `p-0` so the button owns the inner spacing, `flex-1` distributes width evenly across the row, and `relative` plus `focus-within:z-20` lets a focused day button promote above its neighbours when the focus ring would otherwise be clipped by adjacent cells.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root) | `relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1` | A grid slot inside a [CalendarGridRow.root](/v3/reference/theming/keys/CalendarGridRow.md#theme-key-CalendarGridRow-root); the [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) day button sits inside it. `p-0` so the button owns the inner spacing, `flex-1` distributes width evenly across the row, and `relative` plus `focus-within:z-20` lets a focused day button promote above its neighbours when the focus ring would otherwise be clipped by adjacent cells. |

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

## root

> A grid slot inside a [CalendarGridRow.root](/v3/reference/theming/keys/CalendarGridRow.md#theme-key-CalendarGridRow-root); the [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) day button sits inside it. `p-0` so the button owns the inner spacing, `flex-1` distributes width evenly across the row, and `relative` plus `focus-within:z-20` lets a focused day button promote above its neighbours when the focus ring would otherwise be clipped by adjacent cells.

Default classes:

`relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1`

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