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

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/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">2024</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Jan</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Feb</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Mar</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Apr</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">May</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Jun</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Jul</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Aug</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Sep</div>
  </div>
  <div class="d-g-row" role="row">
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Oct</div>
    <div class="d-g-cell cal-item" role="gridcell" tabindex="0">Nov</div>
    <div class="d-g-cell cal-item selected" role="gridcell" tabindex="0">Dec</div>
  </div>
</div>