COMPONENTS

Calendar grid

A native table displays a month, dated events and a highlighted date. It is a schedule view, not another date-picker control.

Usage

Markup: table.calendar > caption, thead, tbody

Behaviour: Server-rendered month display; no date picker, range selection or booking engine.

  • Use table.calendar with a caption, weekday headers with scope="col", and ordinary tbody rows. Supply time[datetime] for each date; leave cells outside the month empty.
  • aria-current="date" marks an application-supplied highlighted date. This example fixes October 5 for demonstration; CSS does not read the current date or calculate weekdays.
  • Events use ordinary links to details or server routes. Month navigation can use real links. Table navigation retains native semantics; there is no ARIA grid or custom keyboard model.
  • The application supplies dates, time zones, availability and event data. Range selection, booking, drag-and-drop and date-picker logic are outside this CSS module.

Component API and styling module · Inherited appearance settings

A month with linked events

A Monday-first October 2026 schedule with two complete event destinations.

October 2026 · Project schedule
MonTueWedThuFriSatSun

Design review · October 5

Review the workspace draft at 10:00.

Team call · October 12

Plan the next week at 09:30.

HTMLSelect text to copy
<table class="calendar"><caption>October 2026 · Project schedule</caption><thead><tr><th scope="col"><abbr title="Monday">Mon</abbr></th><th scope="col"><abbr title="Tuesday">Tue</abbr></th><th scope="col"><abbr title="Wednesday">Wed</abbr></th><th scope="col"><abbr title="Thursday">Thu</abbr></th><th scope="col"><abbr title="Friday">Fri</abbr></th><th scope="col"><abbr title="Saturday">Sat</abbr></th><th scope="col"><abbr title="Sunday">Sun</abbr></th></tr></thead><tbody><tr><td></td><td></td><td></td><td><time datetime="2026-10-01">1</time></td><td><time datetime="2026-10-02">2</time></td><td><time datetime="2026-10-03">3</time></td><td><time datetime="2026-10-04">4</time></td></tr>
<tr><td><time datetime="2026-10-05" aria-current="date">5</time><ul><li><a href="#calendar-review" aria-label="Design review, October 5">Review</a></li></ul></td><td><time datetime="2026-10-06">6</time></td><td><time datetime="2026-10-07">7</time></td><td><time datetime="2026-10-08">8</time></td><td><time datetime="2026-10-09">9</time></td><td><time datetime="2026-10-10">10</time></td><td><time datetime="2026-10-11">11</time></td></tr>
<tr><td><time datetime="2026-10-12">12</time><ul><li><a href="#calendar-call" aria-label="Team call, October 12">Call</a></li></ul></td><td><time datetime="2026-10-13">13</time></td><td><time datetime="2026-10-14">14</time></td><td><time datetime="2026-10-15">15</time></td><td><time datetime="2026-10-16">16</time></td><td><time datetime="2026-10-17">17</time></td><td><time datetime="2026-10-18">18</time></td></tr>
<tr><td><time datetime="2026-10-19">19</time></td><td><time datetime="2026-10-20">20</time></td><td><time datetime="2026-10-21">21</time></td><td><time datetime="2026-10-22">22</time></td><td><time datetime="2026-10-23">23</time></td><td><time datetime="2026-10-24">24</time></td><td><time datetime="2026-10-25">25</time></td></tr>
<tr><td><time datetime="2026-10-26">26</time></td><td><time datetime="2026-10-27">27</time></td><td><time datetime="2026-10-28">28</time></td><td><time datetime="2026-10-29">29</time></td><td><time datetime="2026-10-30">30</time></td><td><time datetime="2026-10-31">31</time></td><td></td></tr></tbody></table>
<section id="calendar-review"><h3>Design review · October 5</h3><p>Review the workspace draft at 10:00.</p></section>
<section id="calendar-call"><h3>Team call · October 12</h3><p>Plan the next week at 09:30.</p></section>