132 подписчика
Как сделать календарь в JS?
В HTML нам поднадобиться всего лишь один div с классом container:
<div class="container"></div>
Вся оснавная работа будет в js.
Сначала необходимо создать функцию, которая будте корректировать дату т.к. в js день недели начинается с воскресенья, а нам привычнее видеть стандарт даты с понедельника:
function getDay(date){
let day = date.getDay();
if(day == 0) day = 7
return day-1
}
Далее мы прописываем основную функцию:
function createCalender(elem, year, month){
elem = document.querySelector(elem) // сюда при вызоые мы будем записывать элимент, в который будет вложен календарь
let mon = month - 1 // т.к. js считает январь нулевым месяцем
let d = new Date(year, mon)
let table = `
<table>
<caption>${month}.${year}</caption> //заголовок таблицы
<tr>
<th>пн</th>
<th>вт</th>
<th>ср</th>
<th>чт</th>
<th>пт</th>
<th>сб</th>
<th>вс</th>
</tr>
<tr> //не закрываем теги таблицы и tr т.к. затем пропишем циклы, которые будут записывать дни
`;
for (let i = 0; i<getDay(d); i++){ //пустые ячейки, если месяц начинается не с понедельника
table += `<td></td>`
}
//гениратор дней
while (d.getMonth() == mon){
table += '<td>' + d.getDate() + '</td>'
if (getDay(d) % 7 == 6){
table += '</tr><tr>'
}
d.setDate(d.getDate() + 1)
}
if (getDay(d) != 0){
for (let i = getDay(d); i<7; i++){ //пустые ячейки если месяц заканчивается не воскресеньем
table += `<td></td>`
}
}
table += '</tr></table>' // закрываем таблицы
elem.innerHTML = table // добавляем код HTML в таблицу
}
И вызываем функцию, передав в нее параметры (расположение, год, месяц)
createCalender('body', 2023, 4)
Таблице мы также можем добавить несколько стилей в css:
.container {
display: flex;
flex-wrap: wrap;
}
table {
border-collapse: collapse;
margin-bottom: 10px;
margin-right: 10px;
}
caption {
padding: 10px 0;
background-color: rgb(69, 154, 69);
border: 1px solid black;
border-bottom: none;
}
td,
th {
border: 1px solid black;
padding: 8px;
text-align: center;
font-size: 18px;
}
th {
font-weight: bold;
background-color: rgb(47, 112, 47);
}
1 минута
4 апреля 2023
215 читали