bohdan_a,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
border: 1px solid hsl(240, 100%, 40%);
border-radius: 4px;
text-align: center;
width: 1.8em;
}
th {
text-align: center;
}
#calendar button:after{
content: 'prev';
}
#calendar button:nth-of-type(2):after{
content: 'next';
}
</style>
</head>
<body>
<div id="calendar"></div>
<script>
function createCalendar(id, year, month) {
const table = document.createElement('table');
const header = document.createElement('tr');
const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const data = new Date(year, month, 0);
const daysInMonth = data.getDate();
const nameMonth = new Intl.DateTimeFormat("en", {
month: "long", year : 'numeric'}).format(data);
table.insertAdjacentHTML('beforeend', `<tr><th colspan='7'>${nameMonth}</th></tr>`)
for (const day of daysOfWeek)
header.insertAdjacentHTML('beforeend', `<th>${day}</th>`)
table.append(header);
let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
let nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
const week = document.createElement('tr');
for (let i = 0; i < 7; i++) {
const day = document.createElement('td');
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth)
day.innerHTML = nextDayToAdd;
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
let div = document.getElementById(id);
div.innerHTML = "";
div.append(table);
[-1,1].forEach(n => {
let button = document.createElement('button');
button.addEventListener('click', () => createCalendar(id, year, month + n));
div.append(button)
})
return table;
}
let table = createCalendar("calendar", 2019, 6);
</script>
</body>
</html>
