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

# CalendarGrid

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

> The 7-column day grid. `border-collapse` lets adjacent cell borders share one hairline rather than doubling at the seam; `w-full` lets the grid stretch to the [Calendar.root](/v3/reference/theming/keys/Calendar.md#theme-key-Calendar-root) content width so cell sizing falls out of `flex-1` on [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root).

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CalendarGrid.md#theme-key-CalendarGrid-root) | `w-full border-collapse space-x-1` | The 7-column day grid. `border-collapse` lets adjacent cell borders share one hairline rather than doubling at the seam; `w-full` lets the grid stretch to the [Calendar.root](/v3/reference/theming/keys/Calendar.md#theme-key-Calendar-root) content width so cell sizing falls out of `flex-1` on [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root). |

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

## root

> The 7-column day grid. `border-collapse` lets adjacent cell borders share one hairline rather than doubling at the seam; `w-full` lets the grid stretch to the [Calendar.root](/v3/reference/theming/keys/Calendar.md#theme-key-Calendar-root) content width so cell sizing falls out of `flex-1` on [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root).

Default classes:

`w-full border-collapse space-x-1`

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