Calendar

Calendars can be used when you don't need a full-featured datepicker script and only want to display a calendar month with one or more dates highlighted. .fizz-is-active can be added to a day to denote the current day, while .fizz-is-highlighted can be added to a day to denote something is occuring on that day.

September 2021
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
HTML
<table class="fizz-calendar">
<caption>
<div class="fizz-space-between-4">
<button class="fizz-icon-button-small"><svg width="16" height="16" viewBox="0 0 32 32"><path d="M23.6 24.4L15.4 16l8.2-8.4L20 4 8.4 16 20 28z"></path></svg></button>
<span>September 2021</span>
<button class="fizz-icon-button-small"><svg viewBox="0 0 32 32" width="16" height="16"><path d="M8.4 7.6l8.2 8.4-8.2 8.4L12 28l11.6-12L12 4z"></path></svg></button>
</div>
</caption>
<thead>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td class="fizz-is-highlighted">3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td class="fizz-is-active fizz-is-highlighted">7</td>
<td class="fizz-is-highlighted">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="fizz-is-highlighted">17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>