Skip to content
Teasim
TeaCSS documentation
StyleSheet

Calendar

Month-grid geometry for a semantic date table.

Month-grid geometry for a semantic date table. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

  • calendar, calendar-header, calendar-grid, calendar-weekday, calendar-cell, calendar-day

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html
<section class="calendar" aria-label="Example calendar week">
  <header class="calendar-header"><h2>September 2026</h2></header>
  <table class="calendar-grid">
    <thead><tr>
      <th class="calendar-weekday" scope="col">Mon</th>
      <th class="calendar-weekday" scope="col">Tue</th>
      <th class="calendar-weekday" scope="col">Wed</th>
      <th class="calendar-weekday" scope="col">Thu</th>
      <th class="calendar-weekday" scope="col">Fri</th>
      <th class="calendar-weekday" scope="col">Sat</th>
      <th class="calendar-weekday" scope="col">Sun</th>
    </tr></thead>
    <tbody><tr>
      <td class="calendar-cell"><button class="calendar-day" type="button">7</button></td>
      <td class="calendar-cell"><button class="calendar-day" type="button">8</button></td>
      <td class="calendar-cell"><button class="calendar-day" type="button">9</button></td>
      <td class="calendar-cell"><button class="calendar-day" type="button">10</button></td>
      <td class="calendar-cell"><button class="calendar-day" type="button">11</button></td>
      <td class="calendar-cell"><button class="calendar-day" type="button">12</button></td>
      <td class="calendar-cell"><button class="calendar-day" type="button">13</button></td>
    </tr></tbody>
  </table>
</section>

Variants and composition

calendar-header holds month controls; calendar-grid is a native table, with weekday headers, cells, and day buttons. Selection and disabled state are ordinary button attributes.

Behavior and accessibility

Use real table column headers for weekdays. Date arithmetic, locale, today/selected colors, limits, form value, and keyboard model remain application responsibilities; do not add role=grid without grid navigation.

Reference

See the interactive Storybook specimen. Continue to Card or return to the Official preset overview.