Hónapváltó nyilak a JavaScript naptárban

Most tegyünk a naptár alá nyilakat a hónap váltásához. Végezzünk módosításokat a HTML kódban:

html<div id="parent">
  <div id="calendar">
    <div class="info">Jan 2020</div>
    <table>
      <thead>
        <tr>
          <th>hé</th>
          <th>ke</th>
          <th>sze</th>
          <th>cs</th>
          <th>pé</th>
          <th>szo</th>
          <th>va</th>
        </tr>
      </thead>
      <tbody class="body"></tbody>
    </table>
    <div class="nav">
      <a href="#" class="prev">←</a>
      <a href="#" class="next">→</a>
    </div>
  </div>
</div>

Végezzünk módosításokat a CSS kódban:

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;
}

Kérjük le a nyilakra mutató hivatkozásokat változókba:

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

Megbeszélés

Most beszéljük meg, hogyan oldjuk meg a feladatot. Valójában a naptár kódja nagyon jól bővíthetően van megírva: van egy draw függvényünk, ami megrajzolja a naptárt egy adott hónapra. Így a nyílra kattintáskor mi csak újrarajzolhatjuk a naptárt egy másik hónapszámmal (és esetleg évvel).

Itt egy példa arra, amit tehetünk a következő hónap nyilára kattintva:

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

Amint látod, itt a getNextYear és a getNextMonth függvényeket használjuk. Beszéljük meg, mit kellene tenniük.

A getNextYear függvény a nevéből adódóan a következő évet kapja meg. Itt arra kell gondolni, hogy ha most december van, akkor a következő hónapra váltáskor az év eggyel növekednie kell, azaz 1-gyel. Ha viszont nem december van, akkor a függvénynek egyszerűen csak az aktuális évet kell visszaadnia.

A getNextMonth függvénynek a következő hónapot kell megkapnia. Minden hónapra, kivéve decembert, a hónap számához hozzáad egyet. Decemberre viszont a következő hónap január lesz, 0 számmal.

Hasonló műveleteket kell végrehajtani az előző hónap gombjának megnyomásakor:

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