2. JavaScript (логика календаря): Нам нужно:

1. Автоматически заполнить список годов и месяцев.
2. Сгенерировать календарь на основе выбранного месяца и года.
3. Обрабатывать выбор дат, чтобы сохранять их в список.

// Заполнение списка годов
const yearSelect = document.getElementById('year');
for (let i = 2020; i <= new Date().getFullYear(); 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 для создания интерактивного календаря с возможностью выбора дат.