Calendar Table Body

Props

• children: slot (required) -- rows of day cells representing weeks in the calendar
• ...restProps: Any additional HTML attributes passed to the <tbody> element

Keyboard Interactions

None -- this component is a passive container. Keyboard navigation is handled by the parent CalendarTable grid.

ARIA

• Implicit rowgroup role from the <tbody> element -- groups the body rows of the grid

When to Use

• Use inside CalendarTable to provide the <tbody> for the calendar grid
• Use to group the week rows containing day cells in the main calendar area
• Use when each row represents one week and each cell represents one day

When Not to Use

• Do not use outside CalendarTable -- use TableBody or DataTableBody for other table types
• Do not use for header rows -- use CalendarTableHead for day-of-week labels

Headless

This component provides a semantic <tbody> element with implicit rowgroup role and zero visual styling. The consumer is responsible for all CSS including row spacing, cell layout, and any visual distinction between the body and header/footer sections.

Styles

The consumer provides all CSS styling. The component renders with a .calendar-table-body class for targeting. No default styles are included — this is a fully headless component.

Testing

• Verify the component renders a <tbody> element with class calendar-table-body
• Verify pass-through attributes are applied

Advice

• Designers: Ensure consistent row heights and cell sizes across all weeks in the body. Visually distinguish the body from the header row of day-of-week labels.
• Developers: Each child row should contain exactly 7 cells (one per day of the week). Use empty cells or disabled styling for days outside the current month.

Implementation Notes

• Renders as a <tbody> element for the body section of a calendar grid
• Children should be rows of day cells, typically one row per week
• Designed to be used inside a CalendarTable <table> structure
• Spreads restProps onto the <tbody> element for consumer customization
• No internal state -- purely a structural wrapper

Composition

CalendarTableBody is part of the CalendarTable composition pattern:

• CalendarTable -- outer <table> with role="grid".
• CalendarTableHead -- <thead> for day-of-week column headers.
• CalendarTableBody -- <tbody> grouping the week rows of day cells.
• CalendarTableRow -- <tr> representing one week.
• CalendarTableCell -- <td> representing one day.

<CalendarTable label="January 2025">
  <CalendarTableHead>...</CalendarTableHead>
  <CalendarTableBody>
    <CalendarTableRow>
      <CalendarTableCell>1</CalendarTableCell>
      <CalendarTableCell>2</CalendarTableCell>
    </CalendarTableRow>
  </CalendarTableBody>
</CalendarTable>

Related components

• calendar-table — a calendar table interactive grid for managing dates, days, etc. <table>
• calendar-table-foot — a calendar table interactive grid tfoot for managing dates, days, etc. <tfoot>
• calendar-table-head — a calendar table interactive grid thead for managing dates, days, etc. <thead>
• calendar-table-row — a calendar table interactive grid row for managing dates, days, etc. <tr>
• calendar-table-td — a calendar table interactive grid data cell for managing dates, days, etc. <td>
• calendar-table-th — a calendar table interactive grid header cell for managing dates, days, etc. <th>
• table — a table with rows and columns <table>

References

• WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/