#2.4 Делаем календарь на JavaScript и задание, работа с DOM
Как сделать календарь в 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); }
Виджет календарь на JavaScript
Вы можете создать виджет календарь на HTML, CSS и JavaScript с помощью готового кода ниже. HTML <div class="calendar"> <header class="calendar__header"> <div class="calendar__month"></div> <div class="calendar__year"></div> </header> <div class="calendar__grid"> <div class="calendar__day-names"> <span class="calendar__day-name">S</span> <span class="calendar__day-name">M</span> <span class="calendar__day-name">T</span> <span class="calendar__day-name">W</span> <span class="calendar__day-name">T</span>...