Pile til månedsskift i kalender i JavaScript

Lad os nu lave pile til månedsskift under kalenderen. Vi foretager ændringer i HTML-koden:

html<div id="parent">
  <div id="calendar">
    <div class="info">Jan 2020</div>
    <table>
      <thead>
        <tr>
          <th>man</th>
          <th>tir</th>
          <th>ons</th>
          <th>tor</th>
          <th>fre</th>
          <th>lør</th>
          <th>søn</th>
        </tr>
      </thead>
      <tbody class="body"></tbody>
    </table>
    <div class="nav">
      <a href="#" class="prev">←</a>
      <a href="#" class="next">→</a>
    </div>
  </div>
</div>

Vi foretager ændringer i CSS-koden:

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

Vi henter referencer til pilene i variabler:

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

Diskussion

Lad os nu diskutere, hvordan opgaven løses. Faktisk er koden til vores kalender skrevet med god udvidelsesevne: vi har funktionen draw, som tegner kalenderen for en given måned. Ved klik på en pil kan vi således genindtegne kalenderen med et andet månedsnummer (og muligvis år).

Her er et eksempel på, hvad vi kan gøre ved klik på pilen til næste måned:

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

Som du kan se, bruges funktionerne getNextYear og getNextMonth her. Lad os diskutere, hvad de skal gøre.

Som navnet antyder, skal funktionen getNextYear hente næste år. Her menes det, at hvis det er december, skal året øges med 1 ved skift til næste måned. Hvis det ikke er december, skal funktionen blot returnere det nuværende år.

Funktionen getNextMonth skal hente næste måned. For alle måneder undtagen december vil den tilføje en enhed til månedsnummeret. For december vil næste måned være januar med nummeret 0.

Tilsvarende operationer skal udføres ved klik på knappen for forrige måned:

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