Lily Design System™

CalendarWeekTable

A calendar grid for a grid of the seven days of one week as day columns. It is a structural wrapper on a <table role="grid"> with data-view="week": the consumer supplies the head, body and rows using the existing CalendarTable* sub-elements, and owns every date, locale format and cell.

Status: beta — implemented and unit-tested in the Svelte canonical; not yet exercised in composed flows.

CalendarWeekTable is one of five calendar views alongside CalendarTable (the general-purpose grid). The component adds only a view-specific base class (calendar-week-table) and the data-view hook, so one stylesheet rule can lay out all five and views can be swapped without changing cell markup. Grid shape for this view: seven day columns (one per day of the week), optionally with a leading row-header column for time slots.

Implementation Notes

  • Renders <table class="calendar-week-table {class}" role="grid" aria-label={label} data-view="week">
  • Renders a <caption> when caption is provided
  • Reuses CalendarTableHead, CalendarTableBody, CalendarTableFoot, CalendarTableRow, CalendarTableTH and CalendarTableTD — there are no CalendarWeekTable* sub-elements
  • No internal state; the consumer owns locale formatting (use Intl.DateTimeFormat) and cell content
  • Spreads restProps onto the root <table>

Props

Prop Type Default Description
class string "" Appended to the base class
label string (required) — Accessible name describing the period shown, e.g. a week (e.g. "Week of 6 January 2025")
caption string — Visible <caption> text
children slot (required) — Head, body and foot sections
...restProps HTML attributes — Spread onto the root <table>

Usage

<CalendarWeekTable label="Week of 6 January 2025">
  <CalendarTableHead>
    <CalendarTableRow><CalendarTableTH scope="col">…</CalendarTableTH></CalendarTableRow>
  </CalendarTableHead>
  <CalendarTableBody>
    <CalendarTableRow><CalendarTableTD>…</CalendarTableTD></CalendarTableRow>
  </CalendarTableBody>
</CalendarWeekTable>

Keyboard Interactions

Key Action
— None built-in. The consumer implements APG grid navigation: arrow keys move between cells, Home/End jump within a row, Enter/Space select

ARIA

  • role="grid" identifies the table as an interactive grid
  • aria-label (from label) names the period shown
  • data-view="week" is for consumer CSS and JS, not assistive technology

When to Use

  • Showing a grid of the seven days of one week as day columns
  • Scheduling, booking and planner views that switch between periods
  • When several calendar views share one stylesheet and need a stable data-view hook

When Not to Use

  • Use CalendarTable when the view is not specifically week-scoped
  • Use CalendarRangePicker to choose a date range, or DateInput to enter a single date
  • Use DataTable for tabular data that is not a calendar
  • Use GanttTable for tasks laid out across a time axis

Headless

The component decides semantics only: the table element, the grid role, the name and the view hook. It decides nothing about layout, colour, today/selected styling, or which dates appear.

Styles

Target .calendar-week-table or [data-view="week"] for view-specific layout. No default styles are included.

Testing

  • Renders a <table> with role="grid" and class calendar-week-table
  • label sets aria-label; data-view is week
  • caption renders a <caption> only when provided
  • Children and rest props are passed through

Advice

  • Format every date with Intl.DateTimeFormat in the consumer; pass the already-formatted period as label.
  • Give every cell an accessible name that includes its full date, not just the day number.
  • Provide an obvious way to reach neighbouring periods (previous / next buttons outside the grid).

Related components

  • calendar-table — the general-purpose calendar grid and its sub-elements
  • CalendarDayTable for slot-level detail
  • calendar-range-picker / date-input — typing a single date

References

Lily™ and Lily Design System™ are trademarks.

Example

Mon 5Tue 6Wed 7Thu 8Fri 9Sat 10Sun 11
Team meetingReview
Show demo markup 
<table class="calendar-week-table" role="grid" aria-label="Week of 5 October 2026" data-view="week"><thead class="calendar-table-head"><tr class="calendar-table-row"><th class="calendar-table-th">Mon 5</th><th class="calendar-table-th">Tue 6</th><th class="calendar-table-th">Wed 7</th><th class="calendar-table-th">Thu 8</th><th class="calendar-table-th">Fri 9</th><th class="calendar-table-th">Sat 10</th><th class="calendar-table-th">Sun 11</th></tr></thead><tbody class="calendar-table-body"><tr class="calendar-table-row"><td class="calendar-table-td">Team meeting</td><td class="calendar-table-td"></td><td class="calendar-table-td"></td><td class="calendar-table-td">Review</td><td class="calendar-table-td"></td><td class="calendar-table-td"></td><td class="calendar-table-td"></td></tr></tbody></table>
Usage example 
<CalendarWeekTable label="Week of 6 January 2025">
  <CalendarTableHead>
    <CalendarTableRow><CalendarTableTH scope="col">…</CalendarTableTH></CalendarTableRow>
  </CalendarTableHead>
  <CalendarTableBody>
    <CalendarTableRow><CalendarTableTD>…</CalendarTableTD></CalendarTableRow>
  </CalendarTableBody>
</CalendarWeekTable>
Show Svelte source 
// In your Svelte component:
import CalendarWeekTable from "lily-design-system-svelte-headless/components/CalendarWeekTable/CalendarWeekTable.svelte";

<CalendarWeekTable>
  <!-- content -->
</CalendarWeekTable>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: calendar-week-table
  • PascalCase: CalendarWeekTable
  • Description: a calendar grid showing the seven days of one week as day columns
  • Status: beta — implemented and unit-tested in the Svelte canonical; not yet exercised in composed flows
  • HTML tag: <table>
  • CSS class: .calendar-week-table
  • Interactive: no

ARIA

  • role="grid" -- identifies the table as an interactive grid widget
  • aria-label={label} -- provides an accessible name describing the period

Keyboard

  • No keyboard interactions built in — the consumer implements grid navigation

Props

  • class: string (default: "") -- appended to the base class
  • label: string (required) -- accessible name describing the period shown, applied via aria-label
  • caption: string (optional) -- visible caption
  • children: slot (required) -- table sections and rows
  • ...restProps: HTML attributes -- spread onto the root <table>