Calendar
Examples for the ss-c-calendar module: a month grid as a semantic <table> with a <caption>, weekday headers (abbr gives the full name) and one cell per day. Mark today with aria-current="date" on its date. The module only draws; the app supplies the dates.
Month with events
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
|
||||||
|
||||||
|
||||||
|
||||||
|
HTML
<table class="ss-c-calendar">
<caption class="ss-c-calendar__caption">October 2026</caption>
<thead><tr><th scope="col" abbr="Monday">Mon</th><th scope="col" abbr="Tuesday">Tue</th><th scope="col" abbr="Wednesday">Wed</th><th scope="col" abbr="Thursday">Thu</th><th scope="col" abbr="Friday">Fri</th><th scope="col" abbr="Saturday">Sat</th><th scope="col" abbr="Sunday">Sun</th></tr></thead>
<tbody>
<tr>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><time class="ss-c-calendar__date" datetime="2026-09-28">28</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><time class="ss-c-calendar__date" datetime="2026-09-29">29</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><time class="ss-c-calendar__date" datetime="2026-09-30">30</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-01">1</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-02">2</time><ul class="ss-c-calendar__events"><li class="ss-c-calendar__event ss-c-calendar__event--info">Sprint review</li></ul></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-03">3</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-04">4</time></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-05">5</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-06">6</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-07">7</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-08" aria-current="date">8</time><ul class="ss-c-calendar__events"><li class="ss-c-calendar__event ss-c-calendar__event--success">Release 1.0</li><li class="ss-c-calendar__event">Team lunch</li></ul></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-09">9</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-10">10</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-11">11</time></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-12">12</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-13">13</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--selected"><time class="ss-c-calendar__date" datetime="2026-10-14">14</time><ul class="ss-c-calendar__events"><li class="ss-c-calendar__event ss-c-calendar__event--warning">Permit deadline</li></ul></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-15">15</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-16">16</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-17">17</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-18">18</time></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-19">19</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-20">20</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-21">21</time><ul class="ss-c-calendar__events"><li class="ss-c-calendar__event ss-c-calendar__event--error">Server maintenance</li></ul></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-22">22</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-23">23</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-24">24</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-25">25</time></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-26">26</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-27">27</time><ul class="ss-c-calendar__events"><li class="ss-c-calendar__event">Workshop: BIM</li></ul></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-28">28</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-29">29</time></td>
<td class="ss-c-calendar__day"><time class="ss-c-calendar__date" datetime="2026-10-30">30</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--weekend"><time class="ss-c-calendar__date" datetime="2026-10-31">31</time></td>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><time class="ss-c-calendar__date" datetime="2026-11-01">1</time></td>
</tr>
</tbody>
</table>Compact picker
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
HTML
<table class="ss-c-calendar ss-c-calendar--compact">
<caption class="ss-c-calendar__caption">October 2026</caption>
<thead><tr><th scope="col" abbr="Monday">Mo</th><th scope="col" abbr="Tuesday">Tu</th><th scope="col" abbr="Wednesday">We</th><th scope="col" abbr="Thursday">Th</th><th scope="col" abbr="Friday">Fr</th><th scope="col" abbr="Saturday">Sa</th><th scope="col" abbr="Sunday">Su</th></tr></thead>
<tbody>
<tr>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="28 September 2026">28</button></td>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="29 September 2026">29</button></td>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="30 September 2026">30</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="1 October 2026">1</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="2 October 2026">2</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="3 October 2026">3</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="4 October 2026">4</button></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="5 October 2026">5</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="6 October 2026">6</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="7 October 2026">7</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-current="date" aria-pressed="false" aria-label="8 October 2026">8</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="9 October 2026">9</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="10 October 2026">10</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="11 October 2026">11</button></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="12 October 2026">12</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="13 October 2026">13</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="true" aria-label="14 October 2026">14</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="15 October 2026">15</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="16 October 2026">16</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="17 October 2026">17</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="18 October 2026">18</button></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="19 October 2026">19</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="20 October 2026">20</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="21 October 2026">21</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="22 October 2026">22</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="23 October 2026">23</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="24 October 2026">24</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="25 October 2026">25</button></td>
</tr>
<tr>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="26 October 2026">26</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="27 October 2026">27</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="28 October 2026">28</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="29 October 2026">29</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="30 October 2026">30</button></td>
<td class="ss-c-calendar__day"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="31 October 2026">31</button></td>
<td class="ss-c-calendar__day ss-c-calendar__day--outside"><button type="button" class="ss-c-calendar__date" aria-pressed="false" aria-label="1 November 2026">1</button></td>
</tr>
</tbody>
</table>