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

Давайте теперь под календарем сделаем стрелки для смены месяца. Внесем изменения в 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 код:

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

Получим ссылки на стрелки в переменные:

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

## Обсуждение

Давайте теперь обсудим, как решать задачу. На самом деле код нашего календаря написан хорошо расширяемым: у нас есть функция `draw`, которая рисует календарь за заданный месяц. Таким образом при нажатии на стрелку мы можем перерисовать календарь с другим номером месяца (и возможно года).

Вот пример того, что мы можем сделать по клику на стрелку следующего месяца:

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

Как вы видите, здесь используются функции `getNextYear` и `getNextMonth`. Давайте обсудим, что они должны делать.

Как следует из названия функция `getNextYear` получает следующий год. Здесь имеется ввиду то, что, если сейчас декабрь, то при переключении на следующий месяц год должен увеличится на `1`. Если же сейчас не декабрь, то функция просто должна вернуть текущий год.

Функция `getNextMonth` должна получать следующий месяц. Она для всех месяцев, кроме декабря, будет к номеру месяцу добавлять единицу. Ну а для декабря следующим месяцем будет январь с номером `0`.

Аналогичные операции следует проделать при нажатии на кнопку предыдущего месяца:

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

Реализуйте работу кнопок смены месяца.

Сделайте так, чтобы информация над календарем соответствовала отображаемому месяцу и году.

←
↑
en ru