Kalender JavaScriptis

Selles jaotises rakendame kalendri. Lihtsuse huvides teeme nii, et kalender kuvatakse praeguse kuu kohta. Kuid eesmärgiga, et seda saaks täiendada nii, et kuud ja aastaid saaks muuta. Siin on näide sellest, mida meil peaks lõpuks saama:

Siin on HTML-i märgistus, mida võite kasutada ülesande lahendamisel:

html<div id="parent">
  <div id="calendar">
    <table>
      <thead>
        <tr>
          <th>E</th>
          <th>T</th>
          <th>K</th>
          <th>N</th>
          <th>R</th>
          <th>L</th>
          <th>P</th>
        </tr>
      </thead>
      <tbody class="body"></tbody>
    </table>
  </div>
</div>

css#parent {
  text-align: center;
}
#calendar {
  display: inline-block;
}
#calendar td, #calendar th {
  padding: 5px 12px;
  border: 1px solid black;
  text-align: center;
}

Võtkem kohe kõikide vajalike siltide viited muutujatesse ning salvestame ka praegused kuu ja aasta:

javascriptlet calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');

let date  = new Date();
let year  = date.getFullYear();
let month = date.getMonth();