Стрэлкі для змены месяца ў календары на 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));
});