Skip to content

CalendarCell

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

A grid slot inside a CalendarGridRow.root; the 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

SlotDefault classesDescription
rootrelative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1A grid slot inside a CalendarGridRow.root; the 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.

root

A grid slot inside a CalendarGridRow.root; the 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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2