@vcl/vcl/calendar/demo/example-month.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v7.1.0/css/all.css">

<div class="data-grid d-g-v-align-middle d-g-align-centered calendar cal-input" role="grid" aria-readonly="true" style="width: 18em;">
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-header-label" role="rowheader">December 2024</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell weekday-label" role="columnheader">Sun</div>
    <div class="d-g-cell weekday-label" role="columnheader">Mon</div>
    <div class="d-g-cell weekday-label" role="columnheader">Tue</div>
    <div class="d-g-cell weekday-label" role="columnheader">Wed</div>
    <div class="d-g-cell weekday-label" role="columnheader">Thu</div>
    <div class="d-g-cell weekday-label" role="columnheader">Fri</div>
    <div class="d-g-cell weekday-label" role="columnheader">Sat</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item d0 other-month disabled" role="gridcell" tabindex="0">30</div>
    <div class="d-g-cell cal-item d1 disabled" role="gridcell" tabindex="0">1</div>
    <div class="d-g-cell cal-item d2 disabled" role="gridcell" tabindex="0">2</div>
    <div class="d-g-cell cal-item d3 disabled" role="gridcell" tabindex="0">3</div>
    <div class="d-g-cell cal-item d4 today" role="gridcell" tabindex="0">4</div>
    <div class="d-g-cell cal-item d5" role="gridcell" tabindex="0">5</div>
    <div class="d-g-cell cal-item d6" role="gridcell" tabindex="0">6</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item d0 available" role="gridcell" tabindex="0">7</div>
    <div class="d-g-cell cal-item d1 unavailable" role="gridcell" tabindex="0">8</div>
    <div class="d-g-cell cal-item d2" role="gridcell" tabindex="0">9</div>
    <div class="d-g-cell cal-item d3 selected-alt" role="gridcell" tabindex="0">10</div>
    <div class="d-g-cell cal-item d4" role="gridcell" tabindex="0">11</div>
    <div class="d-g-cell cal-item d5 selected" role="gridcell" tabindex="0">12</div>
    <div class="d-g-cell cal-item d6" role="gridcell" tabindex="0">13</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item d0" role="gridcell" tabindex="0">14</div>
    <div class="d-g-cell cal-item d1" role="gridcell" tabindex="0">15</div>
    <div class="d-g-cell cal-item d2" role="gridcell" tabindex="0">16</div>
    <div class="d-g-cell cal-item d3" role="gridcell" tabindex="0">17</div>
    <div class="d-g-cell cal-item d4" role="gridcell" tabindex="0">18</div>
    <div class="d-g-cell cal-item d5" role="gridcell" tabindex="0">19</div>
    <div class="d-g-cell cal-item d6" role="gridcell" tabindex="0">20</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item d0" role="gridcell">21</div>
    <div class="d-g-cell cal-item d1 selected-beg" role="gridcell" tabindex="0">22</div>
    <div class="d-g-cell cal-item d2 selected" role="gridcell" tabindex="0">23</div>
    <div class="d-g-cell cal-item d3 selected" role="gridcell" tabindex="0">24</div>
    <div class="d-g-cell cal-item d4 selected" role="gridcell" tabindex="0">25</div>
    <div class="d-g-cell cal-item d5 selected" role="gridcell" tabindex="0">26</div>
    <div class="d-g-cell cal-item d6 selected" role="gridcell" tabindex="0">27</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item d0 selected" role="gridcell" tabindex="0">28</div>
    <div class="d-g-cell cal-item d1 selected" role="gridcell" tabindex="0">29</div>
    <div class="d-g-cell cal-item d2 selected" role="gridcell" tabindex="0">30</div>
    <div class="d-g-cell cal-item d3 selected" role="gridcell" tabindex="0">31</div>
    <div class="d-g-cell cal-item d4 other-month selected-end" role="gridcell" tabindex="0">1</div>
    <div class="d-g-cell cal-item d5 other-month" role="gridcell" tabindex="0">2</div>
    <div class="d-g-cell cal-item d6 other-month" role="gridcell" tabindex="0">3</div>
  </div>
</div>