Условие:

Код.

Решение:

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

Календарь на выбранный месяц

Год:Месяц:  Показать календарь

Выберите даты

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

``` ### 2. JavaScript (логика календаря): Нам нужно: 1. Автоматически заполнить список годов и месяцев. 2. Сгенерировать календарь на основе выбранного месяца и года. 3. Обрабатывать выбор дат, чтобы сохранять их в список. ```javascript // Заполнение списка годов const yearSelect = document.getElementById('year'); for (let i = 2020; i <= 2030; i++) { const option = document.createElement('option'); option.value = i; option.text = i; yearSelect.appendChild(option); } // Заполнение списка месяцев const monthSelect = document.getElementById('month'); const months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; months.forEach((month, index) => { const option = document.createElement('option'); option.value = index; option.text = month; monthSelect.appendChild(option); }); // Получение количества дней в месяце function getDaysInMonth(year, month) { return new Date(year, month + 1, 0).getDate(); } // Генерация календаря function generateCalendar() { const year = yearSelect.value; const month = monthSelect.value; const daysInMonth = getDaysInMonth(year, month); const firstDay = new Date(year, month, 1).getDay(); const calendar = document.getElementById('calendar'); calendar.innerHTML = ''; // Очистим предыдущий календарь // Заголовки таблицы (дни недели) const daysOfWeek = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; const headerRow = document.createElement('tr'); daysOfWeek.forEach(day => { const th = document.createElement('th'); th.innerText = day; headerRow.appendChild(th); }); calendar.appendChild(headerRow); // Создаем строки календаря let date = 1; for (let row = 0; row < 6; row++) { const weekRow = document.createElement('tr'); for (let col = 0; col < 7; col++) { const cell = document.createElement('td'); if (row === 0 && col < firstDay - 1 || date > daysInMonth) { cell.innerText = ''; } else { cell.innerText = date; cell.onclick = () => selectDate(date); // Обрабатывать нажатие на дату date++; } weekRow.appendChild(cell); } calendar.appendChild(weekRow); } } // Выбор даты function selectDate(day) { const selectedDatesList = document.getElementById('selectedDates'); // Проверяем, выбрана ли уже эта дата const existingDate = Array.from(selectedDatesList.children).find(li => li.innerText === day.toString()); if (!existingDate) { const li = document.createElement('li'); li.innerText = day; selectedDatesList.appendChild(li); } } ``` ### Объяснение: 1. Создаем элементы `` в HTML для выбора года и месяца. Списки заполняем программно через JavaScript. 2. Используем функцию `getDaysInMonth`, чтобы определить количество дней в выбранном месяце. 3. Функция `generateCalendar` генерирует календарь на основе выбранных года и месяца, создавая таблицу. При этом каждая клетка календаря – это день, который становится интерактивным через событие `onclick`. 4. Функция `selectDate` позволяет выбирать отдельные даты, добавляя их в список под календарем. ### Проверка работы: При загрузке страницы пользователь сможет выбрать год и месяц, затем, при нажатии на кнопку "Показать календарь", таблица с днями соответствующего месяца отобразится на странице. Также при клике на любую из дат, она добавится в список выбранных дат. ### Итог: Это полноценное решение задачи с использованием JavaScript и HTML для создания интерактивного календаря с возможностью выбора дат.