как сделать ссылки вперед и назад, позволяющие менять месяц

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

'use strict';

// Линейный календарь на JavaScript
let september = document.querySelector('#september');
let div = document.querySelector('#month');
let date;
let day;

for (let i = 1; i <= 30; i++){
    let li = document.createElement('li');
    li.textContent += i;

    september.append(li);
    september.classList.add('ul');
    li.classList.add('dinl');

     date = new Date();
     day = date.getDate()

    if (+li.textContent === day){
        li.style.color = 'red';
    }

}


let months = [
    'янв', 'фев', 'мар', 'апр', 'май', 'июн',
    'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'
];
let monst = date.getMonth()
let p = document.createElement('p');
p.textContent += months[monst];
div.appendChild(p)
let year = date.getFullYear();
p.textContent += '  ' + year;
.ul{
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.dinl{
    display: inline;
    margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="month"></div>
    <ul id="september">
    </ul>

    <script src="js/app.js"></script>
  </body>
</html>


Ответы (0 шт):