Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
week-view
7-day time grid composing day-view-style columns in a semantic table with auto mode, spanning events, and keyboard navigation.
Overview
The <week-view> component renders a weekly schedule as a semantic <table> styled with CSS Grid and subgrid. Each column represents a day; each row an hour. Events are <calendar-event> elements placed in the correct cell, with support for multi-hour spanning and double-booking.
Auto Mode
Place <calendar-event> children with data-date attributes directly inside <week-view>. The component scans event dates and times, computes the hour range, and builds the table automatically.
Auto mode
<week-view data-start-date="2026-04-06"> <calendar-event data-date="2026-04-06" data-category="meeting"> <time datetime="09:00">9:00 AM</time> Sprint standup </calendar-event> <calendar-event data-date="2026-04-07" data-category="focus" data-duration="2h"> <time datetime="10:00">10:00 AM</time> Design review </calendar-event> <calendar-event data-date="2026-04-09" data-category="deadline"> <time datetime="16:00">4:00 PM</time> Sprint deadline </calendar-event></week-view>Each <calendar-event> must have data-date="YYYY-MM-DD" to assign it to a day column, and a <time datetime="HH:MM"> for the hour slot.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-start-date |
ISO date | — | First day of the week (e.g., 2026-04-06). |
data-days |
number | 7 |
Number of day columns. Use 5 for a workweek. |
data-start-hour |
number | "auto" |
"auto" |
First visible hour, or "auto" to compute from events. |
data-end-hour |
number | 19 |
Last visible hour. Ignored when data-start-hour="auto". |
Workweek
Set data-days="5" to show Monday through Friday only.
5-day workweek
<week-view data-start-date="2026-04-06" data-days="5"> ...events...</week-view>Multi-Hour Events
Add data-duration to span across hour rows, matching the <day-view> pattern.
2-hour event
<calendar-event data-date="2026-04-07" data-category="meeting" data-duration="2h"> <time datetime="10:00">10:00 AM</time> Design review</calendar-event>Table Structure
The generated table uses semantic elements for accessibility: <th scope="col"> for day headers and <th scope="row"> for hour labels. CSS Grid with subgrid provides the visual layout.
| Element | Purpose |
|---|---|
<table> | Grid container for the hours × days layout |
<thead> <th> | Day column headers with <time> elements |
<tbody> <th> | Hour row headers with <time datetime="HH:00"> |
<td> | Day/hour cell containing <hour-view> + events |
Events
| Event | Detail | Description |
|---|---|---|
week-view:event-click |
{ date, time, text, element, category, duration } |
Fired when a <calendar-event> is clicked. |
Keyboard
| Key | Action |
|---|---|
| Arrow Down | Next event in same day column |
| Arrow Up | Previous event in same day column |
| Arrow Right | Next event in same hour row |
| Arrow Left | Previous event in same hour row |
Progressive Enhancement
| Layer | What renders |
|---|---|
| HTML only | Calendar events render as a flat list (readable without JS) |
| + CSS | Grid table layout with day columns and hour rows |
| + JS | Auto table generation, spanning events, click handling, keyboard nav |
Related
<day-view>— Single-day hour grid<calendar-event>— Event block element<hour-view>— Hour container element<calendar-wc>— Month calendar with events