Как сделать календарь в 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); }
Для всех кто привык планировать дела на каждый день, неделю или месяц, как известно, необходимо куда-то записывать все свои планы, и по чему бы их не записывать в календарь для рабочего стала Desktop Calendar. Данный календарь располагается прямо на рабочем столе, что очень удобно, так как пропустить какую ни будь запись трудно, ввиду того, что этот календарь всегда на виду. При этом, при желании, степень его заметности можно установить в настройках программы, убрав прозрачность вообще или установив её до 90%...