@vcl/vcl/date-picker/demo/example-day-month.html

The whole VCL in one package

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

<div class="date-picker" role="listbox" aria-multiselectable="false" style="width: 18em;">
  <div class="data-grid d-g-v-align-middle d-g-align-centered calendar cal-input">
    <div class="d-g-row">
      <div class="d-g-cell">
        <div class="toolbar flex row justify-between center" role="menubar" aria-level="1">
          <button type="button" class="button transparent square">
            <div class="icogram">
              <div class="icon fas fa-angle-left" aria-hidden="false" aria-label="previous" role="img"></div>
            </div>
          </button>
          <div class="cal-header-label">December 2024</div>
          <button type="button" class="button transparent square">
            <div class="icogram">
              <div class="icon fas fa-angle-right" aria-hidden="false" aria-label="next" role="img"></div>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell weekday-label">Week</div>
      <div class="d-g-cell weekday-label">Sun</div>
      <div class="d-g-cell weekday-label">Mon</div>
      <div class="d-g-cell weekday-label">Tue</div>
      <div class="d-g-cell weekday-label">Wed</div>
      <div class="d-g-cell weekday-label">Thu</div>
      <div class="d-g-cell weekday-label">Fri</div>
      <div class="d-g-cell weekday-label">Sat</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell weekday-label">48</div>
      <div class="d-g-cell cal-item d0 other-month" role="option" tabindex="0">30</div>
      <div class="d-g-cell cal-item d1" role="option" tabindex="0">1</div>
      <div class="d-g-cell cal-item d2" role="option" tabindex="0">2</div>
      <div class="d-g-cell cal-item d3" role="option" tabindex="0">3</div>
      <div class="d-g-cell cal-item d4 today" role="option" tabindex="0">4</div>
      <div class="d-g-cell cal-item d5" role="option" tabindex="0">5</div>
      <div class="d-g-cell cal-item d6" role="option" tabindex="0">6</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell weekday-label">49</div>
      <div class="d-g-cell cal-item d0" role="option" tabindex="0">7</div>
      <div class="d-g-cell cal-item d1" role="option" tabindex="0">8</div>
      <div class="d-g-cell cal-item d2" role="option" tabindex="0">9</div>
      <div class="d-g-cell cal-item d3" role="option" tabindex="0">10</div>
      <div class="d-g-cell cal-item d4" role="option" tabindex="0">11</div>
      <div class="d-g-cell cal-item d5" role="option" tabindex="0">12</div>
      <div class="d-g-cell cal-item d6" role="option" tabindex="0">13</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell weekday-label">50</div>
      <div class="d-g-cell cal-item d0" role="option" tabindex="0">14</div>
      <div class="d-g-cell cal-item d1" role="option" tabindex="0">15</div>
      <div class="d-g-cell cal-item d2" role="option" tabindex="0">16</div>
      <div class="d-g-cell cal-item d3 selected-beg" role="option" tabindex="0">17</div>
      <div class="d-g-cell cal-item d4 selected" role="option" tabindex="0">18</div>
      <div class="d-g-cell cal-item d5 selected" role="option" tabindex="0">19</div>
      <div class="d-g-cell cal-item d6 selected-end" aria-selected="true" role="option" tabindex="0">20</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell weekday-label">51</div>
      <div class="d-g-cell cal-item d0" role="option" tabindex="0">21</div>
      <div class="d-g-cell cal-item d1" role="option" tabindex="0">22</div>
      <div class="d-g-cell cal-item d2" role="option" tabindex="0">23</div>
      <div class="d-g-cell cal-item d3" role="option" tabindex="0">24</div>
      <div class="d-g-cell cal-item d4" role="option" tabindex="0">25</div>
      <div class="d-g-cell cal-item d5" role="option" tabindex="0">26</div>
      <div class="d-g-cell cal-item d6" role="option" tabindex="0">27</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell weekday-label">52</div>
      <div class="d-g-cell cal-item d0" role="option" tabindex="0">28</div>
      <div class="d-g-cell cal-item d1" role="option" tabindex="0">29</div>
      <div class="d-g-cell cal-item d2" role="option" tabindex="0">30</div>
      <div class="d-g-cell cal-item d3" role="option" tabindex="0">31</div>
      <div class="d-g-cell cal-item d4 other-month" role="option" tabindex="0">1</div>
      <div class="d-g-cell cal-item d5 other-month" role="option" tabindex="0">2</div>
      <div class="d-g-cell cal-item d6 other-month" role="option" tabindex="0">3</div>
    </div>
    <div class="d-g-row">
      <div class="d-g-cell">
        <div class="toolbar flex row justify-between" role="menubar" aria-level="2">
          <button type="button" class="button transparent flex">
            <div class="icogram">
              <span class="text">Today</span>
            </div>
          </button>
          <button type="button" class="button transparent flex">
            <div class="icogram">
              <span class="text">Go to selected</span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>