Объясните, пожалуйста как создать пустые ячейки
const createCalendar = (id, year, month) => {
let elem = document.getElementById(id);
let mon = month - 1;
let d = new Date(year, mon);
let defaultTable = '<div class="table"><div>пн</div><div>вт</div><div>ср</div><div>чт</div><div>пт</div><div>сб</div><div>вс</div>';
let table = defaultTable;
//Ячейки календаря с датами
const fillTable = () => {
for (let i = 1; i <= d.getDate(); i++) {
if (d.getMonth() <= mon) {
table += '<div class="day" data-id="">' + d.getDate() + '</div>';
elem.innerHTML = table;
d.setDate(d.getDate() + 1);
}
};
};
fillTable();
// Выводим текущий месяц через select
const getMonth = () => {
let selectM = document.querySelector('.month');
for (let i = 0; i < selectM.length; i++) {
if (selectM[i].value == mon) {
selectM.value = mon + 1;
}
}
const getIndexDays = (month, year) => {
return new Date(year, month, 0).getDate();
};
selectM.addEventListener('change', () => {
let currentMonth = selectM.selectedIndex + 1;
table = defaultTable;
for (let i = 1; i < getIndexDays(currentMonth, year) + 1; i++) {
table += '<div class="day" data-id="">' + i + '</div>';
elem.innerHTML = table;
}
})
};
getMonth();
}
createCalendar('calendar', 2019, 8);
.table {
max-width: 300px;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 8px;
text-align: center;
color: rgba(69, 80, 95, 0.445);
}
.day {
min-width: 32px;
min-height: 32px;
line-height: 32px;
text-align: center;
font-weight: 400;
cursor: pointer;
color: rgb(30, 30, 30);
border-radius: 4px;
}
.day:hover {
background-color: #F2F5F9;
}
#calendar {
max-width: 300px;
padding: 20px;
background-color: white;
box-shadow: 0px 8px 30px rgba(19, 24, 31, 0.08);
border-radius: 8px;
font-family: Graphik LCG;
}
.month {
position: relative;
padding: 10px;
margin-bottom: 10px;
font-family: Graphik LCG;
font-size: 15px;
background-color: #F2F5F9;
border-radius: 3px;
border: none;
cursor: pointer;
transition: ease-out 0.1s;
}
.month:hover {
background-color: rgb(213, 219, 226);
transition: ease-out 0.1s;
}
select {
-webkit-appearance:none;
-moz-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<select class="month" onchange="">
<option value="1">Январь</option>
<option value="2">Февраль</option>
<option value="3">Март</option>
<option value="4">Апрель</option>
<option value="5">Май</option>
<option value="6">Июнь</option>
<option value="7">Июль</option>
<option value="8">Август</option>
<option value="9">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select>
<select class="month">
<option value="1">2019</option>
</select>
<div id="calendar"></div>
<script src="script.js"></script>
</body>
</html>
DOM
, то добавить в таблицу перед<div class="day" data-id="">1</div>
просто пустое<div class="day" data-id=""></div>
– Виталий Шебаниц 12 авг в 18:10