Skip to main content

Calendar

Information: Documentation incomplete

This component still requires documentation.

Use the calendar component to show a view of the current month and highlight the current day and scheduled events.

Examples

Default

View HTML
<div class="uhb-c-calendar">
  <table class="uhb-c-calendar__table">
    <thead class="uhb-c-calendar__head">
      <tr class="uhb-c-calendar__week">
        <th class="uhb-c-calendar__day" scope="col" title="Monday">Mo</th>
        <th class="uhb-c-calendar__day" scope="col" title="Tuesday">Tu</th>
        <th class="uhb-c-calendar__day" scope="col" title="Wednesday">We</th>
        <th class="uhb-c-calendar__day" scope="col" title="Thursday">Th</th>
        <th class="uhb-c-calendar__day" scope="col" title="Friday">Fr</th>
        <th class="uhb-c-calendar__day" scope="col" title="Saturday">Sa</th>
        <th class="uhb-c-calendar__day" scope="col" title="Sunday">Su</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uhb-c-calendar__week">
        <td class="uhb-c-calendar__day"></td>
        <td class="uhb-c-calendar__day"></td>
        <td class="uhb-c-calendar__day"></td>
        <td class="uhb-c-calendar__day" data-dow="4" data-dd="1" data-ddmmyy="2021-04-0 1">1</td>
        <td class="uhb-c-calendar__day" data-dow="5" data-dd="2" data-ddmmyy="2021-04-02">2</td>
        <td class="uhb-c-calendar__day" data-dow="6" data-dd="3" data-ddmmyy="2021-04-03">3</td>
        <td class="uhb-c-calendar__day" data-dow="7" data-dd="4" data-ddmmyy="2021-04-04">
          <a href="#" class="uhb-c-calendar__event">4</a>
        </td>
      </tr>
      <tr class="uhb-c-calendar__week">
        <td class="uhb-c-calendar__day" data-dow="1" data-dd="5" data-ddmmyy="2021-04-05">5</td>
        <td class="uhb-c-calendar__day" data-dow="2" data-dd="6" data-ddmmyy="2021-04-06">6</td>
        <td class="uhb-c-calendar__day" data-dow="3" data-dd="7" data-ddmmyy="2021-04-07">7</td>
        <td class="uhb-c-calendar__day" data-dow="4" data-dd="8" data-ddmmyy="2021-04-08">8</td>
        <td class="uhb-c-calendar__day" data-dow="5" data-dd="9" data-ddmmyy="2021-04-09">9</td>
        <td class="uhb-c-calendar__day" data-dow="6" data-dd="10" data-ddmmyy="2021-04-10">10</td>
        <td class="uhb-c-calendar__day" data-dow="7" data-dd="11" data-ddmmyy="2021-04-11">11</td>
      </tr>
      <tr class="uhb-c-calendar__week">
        <td class="uhb-c-calendar__day is-current" data-dow="1" data-dd="12" data-ddmmyy="2021-04-12">12</td>
        <td class="uhb-c-calendar__day" data-dow="2" data-dd="13" data-ddmmyy="2021-04-13">13</td>
        <td class="uhb-c-calendar__day" data-dow="3" data-dd="14" data-ddmmyy="2021-04-14">14</td>
        <td class="uhb-c-calendar__day" data-dow="4" data-dd="15" data-ddmmyy="2021-04-15">15</td>
        <td class="uhb-c-calendar__day" data-dow="5" data-dd="16" data-ddmmyy="2021-04-16">16</td>
        <td class="uhb-c-calendar__day" data-dow="6" data-dd="17" data-ddmmyy="2021-04-17">17</td>
        <td class="uhb-c-calendar__day" data-dow="7" data-dd="18" data-ddmmyy="2021-04-18">18</td>
      </tr>
      <tr class="uhb-c-calendar__week">
        <td class="uhb-c-calendar__day" data-dow="1" data-dd="19" data-ddmmyy="2021-04-19">19</td>
        <td class="uhb-c-calendar__day" data-dow="2" data-dd="20" data-ddmmyy="2021-04-20">20</td>
        <td class="uhb-c-calendar__day" data-dow="3" data-dd="21" data-ddmmyy="2021-04-21">21</td>
        <td class="uhb-c-calendar__day" data-dow="4" data-dd="22" data-ddmmyy="2021-04-22">22</td>
        <td class="uhb-c-calendar__day" data-dow="5" data-dd="23" data-ddmmyy="2021-04-23">23</td>
        <td class="uhb-c-calendar__day" data-dow="6" data-dd="24" data-ddmmyy="2021-04-24">24</td>
        <td class="uhb-c-calendar__day" data-dow="7" data-dd="25" data-ddmmyy="2021-04-25">25</td>
      </tr>
      <tr class="uhb-c-calendar__week">
        <td class="uhb-c-calendar__day" data-dow="1" data-dd="26" data-ddmmyy="2021-04-26">26</td>
        <td class="uhb-c-calendar__day" data-dow="2" data-dd="27" data-ddmmyy="2021-04-27">27</td>
        <td class="uhb-c-calendar__day" data-dow="3" data-dd="28" data-ddmmyy="2021-04-28">28</td>
        <td class="uhb-c-calendar__day" data-dow="4" data-dd="29" data-ddmmyy="2021-04-29">29</td>
        <td class="uhb-c-calendar__day" data-dow="5" data-dd="30" data-ddmmyy="2021-04-30">30</td>
        <td class="uhb-c-calendar__day"></td>
        <td class="uhb-c-calendar__day"></td>
      </tr>
    </tbody>
  </table>
</div>