Написать сценарий, который выводит на страницу календарь на выбранный месяц и год, где пользователем можно выбирать даты и составлять список выбранных дат

Условие:

Код. Javascript

Решение:

### Предмет: **Программирование (Веб-разработка)** ### Раздел: **Javascript + HTML** #### Задание: Написать сценарий, который выводит на страницу календарь на выбранный месяц и год, где пользователем можно выбирать даты и составлять список выбранных дат. ### Шаг 1: Создание HTML страницы Создадим простую HTML-страницу с формой выбора месяца и года, а также область для отображения календаря. После этого добавим кнопки для добавления выбранных дат в список. ```html Календарь

Выберите месяц и год:

Месяц: Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Год:Показать календарь

Выбранные даты:

``` ### Шаг 2: Написание JavaScript кода Теперь необходимо написать сценарий, который будет генерировать календарь и позволит пользователю выбирать даты для добавления в список. ```javascript // script.js // Функция для генерации календаря на основе выбранных месяца и года function generateCalendar() { const month = document.getElementById("month").value; const year = document.getElementById("year").value; // Получаем первый и последний день месяца const firstDay = new Date(year, month, 1).getDay(); const lastDate = new Date(year, parseInt(month) + 1, 0).getDate(); const calendarDiv = document.getElementById("calendar"); calendarDiv.innerHTML = ''; // Создание таблицы для календаря let table = document.createElement("table"); // Создаем заголовки (воскресенье-суббота) const headerRow = table.insertRow(); const daysOfWeek = ['Вос', 'Пон', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']; daysOfWeek.forEach(day => { let th = document.createElement("th"); th.textContent = day; headerRow.appendChild(th); }); // Первая строка календаря let row = table.insertRow(); // Создание пустых ячеек до первого дня месяца for (let i = 0; i < firstDay; i++) { let cell = row.insertCell(); cell.innerHTML = ""; } // Заполнение календаря числами for (let date = 1; date <= lastDate; date++) { if (row.cells.length === 7) { row = table.insertRow(); // Начинаем новую строку } let cell = row.insertCell(); cell.textContent = date; // Добавляем возможность клика по числу для выбора даты cell.addEventListener("click", function() { selectDate(date, month, year); }); cell.style.cursor = "pointer"; } // Добавляем таблицу в календарный div calendarDiv.appendChild(table); } // Функция для добавления выбранной даты в список function selectDate(day, month, year) { const monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; const selectedDate = `${day} ${monthNames[month]} ${year}`; const selectedDatesList = document.getElementById("selected-dates"); const li = document.createElement("li"); li.textContent = selectedDate; selectedDatesList.appendChild(li); } ``` ### Пояснения: 1. **HTML структура**: - Используем элементы `` для выбора месяца и `` для выбора года. - Кнопка "Показать календарь" вызывает функцию `generateCalendar()` для отображения календаря. 2. **JavaScript (script.js)**: - В функции `generateCalendar()`: - Мы находим первое число месяца и день недели, с которого начинается этот месяц. - Создаем таблицу для календаря, в которую заносим дни недели (воскресенье-суббота) и числа месяца. - Числа месяца добавлены с возможностью клика, с добавлением выбранной даты в список. - В функции `selectDate()`: - При клике на любую дату эта дата добавляется в список пользовательских выборов. ### Вывод: Этот сценарий реализует задачу с отображением календаря по выбранным месяцу и году, а также позволяет пользователю выбрать и сохранить даты в списке.