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>