Стрелки за смяна на месеца в календар на JavaScript

Нека сега под календара направим стрелки за смяна на месеца. Нека направим промени в HTML кода:

html<div id="parent">
  <div id="calendar">
    <div class="info">Яну 2020</div>
    <table>
      <thead>
        <tr>
          <th>пн</th>
          <th>вт</th>
          <th>ср</th>
          <th>чт</th>
          <th>пт</th>
          <th>сб</th>
          <th>вс</th>
        </tr>
      </thead>
      <tbody class="body"></tbody>
    </table>
    <div class="nav">
      <a href="#" class="prev">←</a>
      <a href="#" class="next">→</a>
    </div>
  </div>
</div>

Нека направим промени в CSS кода:

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

Нека получим връзките към стрелките в променливи:

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

Обсъждане

Нека сега обсъдим как да решим задачата. Всъщност кодът на нашия календар е написан добре разширяем: имаме функция draw, която рисува календара за даден месец. По този начин при натискане на стрелка можем да преначертаем календара с друг номер на месеца (и евентуално година).

Ето пример за това какво можем да направим при кликване върху стрелката за следващия месец:

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

Както виждате, тук се използват функции getNextYear и getNextMonth. Нека обсъдим какво трябва да правят те.

Както подсказва името, функцията getNextYear взема следващата година. Тук се има предвид, че ако в момента е декември, то при преминаване към следващия месец годината трябва да се увеличи с 1. Ако в момента не е декември, то функцията просто трябва да върне текущата година.

Функцията getNextMonth трябва да вземе следващия месец. Тя за всички месеци, с изключение на декември, ще добавя единица към номера на месеца. А за декември следващият месец ще бъде януари с номер 0.

Подобни операции трябва да се извършат при натискане на бутона за предишен месец:

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