Šípky na prepínanie mesiaca v kalendári na JavaScript

Pridajme teraz pod kalendár šípky na prepínanie mesiaca. Vykonajme zmeny v HTML kóde:

html<div id="parent">
  <div id="calendar">
    <div class="info">Jan 2020</div>
    <table>
      <thead>
        <tr>
          <th>po</th>
          <th>ut</th>
          <th>st</th>
          <th>št</th>
          <th>pi</th>
          <th>so</th>
          <th>ne</th>
        </tr>
      </thead>
      <tbody class="body"></tbody>
    </table>
    <div class="nav">
      <a href="#" class="prev">←</a>
      <a href="#" class="next">→</a>
    </div>
  </div>
</div>

Vykonajme zmeny v CSS kóde:

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

#calendar .nav, #calendar .info {
  text-align: center;
}
#calendar a {
  color: blue;
  font-size: 25px;
  text-decoration: none;
}
#calendar a:hover {
  color: red;
}

#calendar .active {
  color: red;
}

Získajme odkazy na šípky do premenných:

javascriptlet prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

Diskusia

Poďme teraz diskutovať o tom, ako úlohu vyriešiť. Kód nášho kalendára je napísaný s dobrým dôrazom na rozšíriteľnosť: máme funkciu draw, ktorá vykreslí kalendár pre zadaný mesiac. To znamená, že pri kliknutí na šípku môžeme prekresliť kalendár s iným číslom mesiaca (a prípadne roku).

Tu je príklad toho, čo môžeme urobiť pri kliknutí na šípku nasledujúceho mesiaca:

javascriptnext.addEventListener('click', function() {
  draw(body, getNextYear(year, month), getNextMonth(month));
});

Ako vidíte, tu sa používajú funkcie getNextYear a getNextMonth. Poďme sa rozprávať o tom, čo by mali robiť.

Ako názov napovedá, funkcia getNextYear získa nasledujúci rok. Tu sa myslí to, že ak je teraz december, tak pri prepnutí na nasledujúci mesiac by sa mal rok zvýšiť o 1. Ak teraz nie je december, tak funkcia by mala jednoducho vrátiť aktuálny rok.

Funkcia getNextMonth by mala získať nasledujúci mesiac. Pre všetky mesiace okrem decembra bude k číslu mesiaca pridávať jeden. No a pre december bude nasledujúcim mesiacom január s číslom 0.

Podobné operácie by sme mali vykonať pri kliknutí na tlačidlo predchádzajúceho mesiaca:

javascriptprev.addEventListener('click', function() {
  draw(body, getPrevYear(year, month), getPrevMonth(month));
});