<div class="calendar-container">
  <div class="calendar-nav">
    <button class="prev-btn">←</button>
    <div class="calendar-month-year"></div>
    <button class="next-btn">→</button>
  </div>
  <div class="calendar-dates">
    <!-- Даты будут добавляться с помощью JS -->
  </div>
</div>

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.calendar-month-year {
  font-size: 18px;
  font-weight: bold;
}

.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  width: 100%;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.calendar-day:hover {
  background-color: #dcdcdc;
}

.calendar-day.weekend {
  background-color: #f9dcdc;
}

.calendar-day.current-month {
  background-color: #d0e7f9;
}

.calendar-day span {
  font-size: 14px;
  color: #333;
}

.calendar-day .date {
  font-size: 18px;
  font-weight: bold;
}

.calendar-month {
  color: #b0c1d1;
}

.calendar-day span.day-name {
  font-size: 14px;
  color: #999;
}

document.addEventListener("DOMContentLoaded", function () {
  const prevButton = document.querySelector(".prev-btn");
  const nextButton = document.querySelector(".next-btn");
  const monthYearLabel = document.querySelector(".calendar-month-year");
  const calendarDatesContainer = document.querySelector(".calendar-dates");

  let currentDate = new Date();

  function renderCalendar(date) {
    calendarDatesContainer.innerHTML = "";

    // Устанавливаем месяц и год
    const month = date.getMonth();
    const year = date.getFullYear();
    monthYearLabel.textContent = `${month + 1} ${year}`;

    // Получаем первый день месяца и количество дней в нем
    const firstDayOfMonth = new Date(year, month, 1);
    const lastDayOfMonth = new Date(year, month + 1, 0);
    const startDate = firstDayOfMonth.getDay(); // день недели для первого числа
    const totalDays = lastDayOfMonth.getDate();

    // Заполняем календарь днями недели
    const daysOfWeek = ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"];
    daysOfWeek.forEach(day => {
      const dayElement = document.createElement("div");
      dayElement.classList.add("calendar-day");
      dayElement.innerHTML = `<span class="day-name">${day}</span>`;
      calendarDatesContainer.appendChild(dayElement);
    });

    // Переносим первый день месяца на понедельник, если он не понедельник
    const emptyCells = startDate === 0 ? 6 : startDate - 1;

    // Добавляем пустые ячейки до первого дня месяца
    for (let i = 0; i < emptyCells; i++) {
      const emptyCell = document.createElement("div");
      calendarDatesContainer.appendChild(emptyCell);
    }

    // Добавляем дни месяца
    for (let day = 1; day <= totalDays; day++) {
      const dayElement = document.createElement("div");
      dayElement.classList.add("calendar-day");

      const currentDay = new Date(year, month, day);
      const dayOfWeek = currentDay.getDay();

      // Проверяем, является ли день выходным (суббота и воскресенье)
      if (dayOfWeek === 0 || dayOfWeek === 6) {
        dayElement.classList.add("weekend");
      }

      // Проверка на текущий день
      if (currentDay.toDateString() === new Date().toDateString()) {
        dayElement.classList.add("current-month");
      }

      dayElement.innerHTML = `<div class="date">${day}</div><span class="month">${month + 1}</span>`;
      calendarDatesContainer.appendChild(dayElement);
    }
  }

  // Управление кнопками для перехода между месяцами
  prevButton.addEventListener("click", function () {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate);
  });

  nextButton.addEventListener("click", function () {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(currentDate);
  });

  // Изначальный рендер календаря
  renderCalendar(currentDate);
});

<!-- Calendar Container -->
<div id="calendar-week">
    <!-- Dates will be populated dynamically -->
</div>
<button id="prev-week">Предыдущая неделя</button>
<button id="next-week">Следующая неделя</button>

<!-- Event Info Container -->
<div id="event-info">
    <h3>Events for this day:</h3>
    <ul id="events-list">
        <!-- Events will be displayed here -->
    </ul>
</div>

#calendar-week {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.calendar-day {
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background-color: #f1f1f1;
    border-radius: 5px;
    margin: 0 5px;
    transition: background-color 0.3s;
}

.calendar-day:hover {
    background-color: #e0e0e0;
}

#event-info {
    margin-top: 20px;
}

#events-list {
    list-style-type: none;
    padding: 0;
}

#events-list li {
    padding: 5px;
}

.calendar-day.has-event {
    background-color: #ffcc00;  /* Цвет фона для дня с событием */
    color: white;                /* Цвет текста */
}

.calendar-day.no-event {
    background-color: #f1f1f1;  /* Цвет фона для дня без события */
}

let currentDate = new Date(); // Начальная дата для отображения календаря

// Если сейчас поздно ночью (после полудня), сдвигаем на следующий день
if (currentDate.getHours() >= 21) { 
    currentDate.setDate(currentDate.getDate() + 1); // Добавляем один день, если сейчас поздно
}

console.log("Test date (Today or next day if after 9 PM):", currentDate);

// Функция для генерации календаря для текущего периода
function generateWeek() {
    const calendarContainer = document.getElementById('calendar-week');
    calendarContainer.innerHTML = ''; // Очищаем календарь

    const daysOfWeek = [];

    // Устанавливаем начало недели на сегодняшний день
    const startOfWeek = new Date(currentDate);
    startOfWeek.setHours(0, 0, 0, 0); // Убираем время, оставляем только день, месяц и год

    console.log("Start of the week: ", startOfWeek); // Логируем начальную дату

    // Генерация календаря на 14 дней (7 дней назад и 7 дней вперед)
    for (let i = 0; i < 14; i++) {  // Показать 7 дней назад и 7 дней вперед
        const newDate = new Date(startOfWeek);
        newDate.setDate(startOfWeek.getDate() + i); // Сдвигаем дату на i дней

        const dateString = newDate.toISOString().split('T')[0].replace(/-/g, ''); // Форматируем как YYYYMMDD (без дефисов)
        const dayDisplay = newDate.getDate(); // День месяца для отображения

        console.log(`Generated date for index ${i}: ${dateString}, day displayed: ${dayDisplay}`); // Логируем каждую сгенерированную дату

        // Создаем элемент для дня календаря
        const dayElement = document.createElement('div');
        dayElement.classList.add('calendar-day');
        dayElement.setAttribute('data-date', dateString);  // Устанавливаем полную дату как атрибут
        dayElement.innerText = dayDisplay;  // Отображаем день месяца

        dayElement.classList.add('no-event');  // По умолчанию, добавляем класс без события
        daysOfWeek.push(dayElement);
    }

    // Добавляем все дни в контейнер календаря
    daysOfWeek.forEach(day => calendarContainer.appendChild(day));

    // Вызовем markEventDays() только после того, как получим данные
    fetchEventsAndMarkDays();
}

// Функция для запроса событий и пометки дней с событиями
function fetchEventsAndMarkDays() {
    console.log("Fetching events...");
    const selectedDate = getCurrentDate();  // Получаем текущую дату
    console.log("Selected date for events: ", selectedDate);

    // Запрос на получение событий для выбранной даты
    fetch(`/wp-json/events/v1/get-events?date=${selectedDate}`)
        .then(response => {
            console.log("API request successful:", response);
            return response.json();
        })
        .then(events => {
            console.log("Events data:", events);

            const selectedDates = [];

            // Проходим по событиям, чтобы получить все даты между начальной и конечной датой
            events.forEach(event => {
                const startDate = event.start_date;  // Формат YYYYMMDD
                let endDate = event.end_date;      // Формат YYYYMMDD

                let currentDate = new Date(startDate.substr(0, 4), startDate.substr(4, 2) - 1, startDate.substr(6, 2)); // Преобразуем в Date
                let endDateObj = new Date(endDate.substr(0, 4), endDate.substr(4, 2) - 1, endDate.substr(6, 2)); // Преобразуем в Date

                // Добавляем 1 день к endDate, чтобы включить его в диапазон
                endDateObj.setDate(endDateObj.getDate() + 1);

                // Добавляем все дни между start_date и end_date, включая сам end_date
                while (currentDate <= endDateObj) { // Здесь важно использовать <=, чтобы включить endDate
                    const formattedDate = currentDate.toISOString().split('T')[0].replace(/-/g, '');  // Преобразуем в YYYYMMDD
                    selectedDates.push(formattedDate);  // Добавляем в массив
                    currentDate.setDate(currentDate.getDate() + 1); // Переходим к следующему дню
                }
            });

            console.log("Dates with events:", selectedDates);

            // Помечаем дни, которые есть в selectedDates
            document.querySelectorAll('.calendar-day').forEach(dayElement => {
                const dayDate = dayElement.getAttribute('data-date');
                console.log("Checking day: ", dayDate);  // Логируем каждый день

                if (selectedDates.includes(dayDate)) {
                    console.log("Marking day " + dayDate + " with events");  // Логируем, что дата с событием
                    dayElement.classList.remove('no-event');
                    dayElement.classList.add('has-event');  // Убираем метку "без события", добавляем "с событием"
                } else {
                    console.log("No events for day: " + dayDate);  // Логируем, если нет событий
                }
            });

            // Теперь добавим обработчик кликов по дням
            addClickEventToDays(events);
        })
        .catch(error => {
            console.error('Error fetching events:', error); // Логируем ошибки
        });
}

// Функция для получения текущей даты (с дефисами)
function getCurrentDate() {
    const today = new Date();
    today.setHours(0, 0, 0, 0);  // Убираем время, оставляем только день, месяц и год
    return today.toISOString().split('T')[0].replace(/-/g, '');  // Возвращаем дату в формате YYYYMMDD
}

// Функция для добавления обработчика клика по дням
function addClickEventToDays(events) {
    document.querySelectorAll('.calendar-day').forEach(day => {
        day.addEventListener('click', function() {
            const selectedDate = this.getAttribute('data-date');
            console.log("Clicked date: ", selectedDate);

            // Находим события, которые соответствуют выбранной дате
            const eventsForDay = events.filter(event => event.start_date <= selectedDate && event.end_date >= selectedDate);

            // Логируем данные
            console.log("Events data for clicked date:", eventsForDay);

            const eventsList = document.getElementById('events-list');
            eventsList.innerHTML = '';  // Очищаем предыдущие события

            // Выводим события для выбранной даты
            if (eventsForDay.length > 0) {
                eventsForDay.forEach(event => {
                    const eventItem = document.createElement('li');

                    // Создаем ссылку на событие
                    const eventLink = document.createElement('a');
                    eventLink.href = event.url;  // Ссылка на страницу события
                    eventLink.innerHTML = `${event.title} — ${event.start_date} (${event.location})`;

                    eventItem.appendChild(eventLink);
                    eventsList.appendChild(eventItem);
                });
            } else {
                eventsList.innerHTML = '<li>Нет событий на этот день.</li>';
            }
        });
    });
}

// Функции для перехода на следующую и предыдущую неделю
function goToPreviousWeek() {
    currentDate.setDate(currentDate.getDate() - 14);  // Сдвигаем дату назад на 14 дней
    generateWeek();
}

function goToNextWeek() {
    currentDate.setDate(currentDate.getDate() + 14);  // Сдвигаем дату вперед на 14 дней
    generateWeek();
}

// Добавляем обработчики для кнопок
document.getElementById('prev-week').addEventListener('click', goToPreviousWeek);
document.getElementById('next-week').addEventListener('click', goToNextWeek);

window.onload = generateWeek;  // Генерация недели при загрузке страницы