Урок 5.13. Работа с формами HTML в JavaScript
Как сделать календарь в 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); }
Скачать календарь на 2020 год бесплатно, без регистраций, в векторных форматах EPS, CDR и png
Дизайнеры знают, что самым долгим и нудным занятием при создании календаря может стать создание календарной сетки. Чтобы облегчить вам жизнь, дорогие дизайнеры, мы создали сетки в векторе. Вы можете скачать файлы даже «не в кривых»...