>>218032
Для реализации всплывающего окна с фото похода при наведении на активную дату, вам нужно будет получить дополнительную информацию о походе вместе с датами. Вот пошаговый подход к решению этой задачи:

Изменение API для передачи дополнительной информации:
Убедитесь, что ваше API возвращает не только даты, но и дополнительную информацию о походах, к которым эти даты привязаны. Например, фото похода.

Обновление модели и сериализатора:
Обновите ваши модели и сериализаторы Django, чтобы включить эту информацию в ответ API.

Изменение JS для обработки новой информации:
Обновите ваш JavaScript код, чтобы обрабатывать полученные данные и показывать всплывающее окно с фото похода.

Шаг 1: Обновление API
Обновление сериализатора
Предположим, у вас есть сериализатор для модели Date:

python
Копировать код
from rest_framework import serializers
from .models import Date, Hike

class HikeSerializer(serializers.ModelSerializer):
class Meta:
model = Hike
fields = ['id', 'name', 'photo'] # Включите здесь нужные поля

class DateSerializer(serializers.ModelSerializer):
hike = HikeSerializer(read_only=True) # Включаем сериализатор Hike

class Meta:
model = Date
fields = ['id', 'date', 'hike'] # Включаем связанный поход
Теперь ваш сериализатор будет возвращать информацию о походе, включая фото.

Обновление представления
Теперь обновите ваше представление, чтобы использовать этот сериализатор:

python
Копировать код
from rest_framework import generics
from .models import Date
from .serializers import DateSerializer

class DateListAPIView(generics.ListAPIView):
queryset = Date.objects.all()
serializer_class = DateSerializer
Шаг 2: Обновление JavaScript
Теперь, когда ваш API возвращает дополнительную информацию, обновите ваш JavaScript код для обработки этих данных.

Пример JavaScript кода:

javascript
Копировать код
fetch('/api/dates/')
.then(response => response.json())
.then(data => {
data.forEach(item => {
let date = item.date;
let hike = item.hike;
let photo = hike.photo;

// Найти ячейку календаря по дате
let cell = document.querySelector(`[data-date="${date}"]`);
if (cell) {
cell.classList.add('active');
cell.addEventListener('mouseover', () => showPopup(cell, hike));
cell.addEventListener('mouseout', hidePopup);
}
});
});

function showPopup(cell, hike) {
let popup = document.createElement('div');
popup.classList.add('popup');
popup.innerHTML = `
<div class="popup-content">
<img src="${hike.photo}" alt="${hike.name}">
<p>${hike.name}</p>
</div>
`;
document.body.appendChild(popup);
positionPopup(cell, popup);
}

function hidePopup() {
let popup = document.querySelector('.popup');
if (popup) {
popup.remove();
}
}

function positionPopup(cell, popup) {
let rect = cell.getBoundingClientRect();
popup.style.top = `${rect.top + window.scrollY}px`;
popup.style.left = `${rect.left + window.scrollX}px`;
}
Шаг 3: CSS для всплывающего окна
Добавьте стили для вашего всплывающего окна:

css
Копировать код
.popup {
position: absolute;
background: white;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
z-index: 1000;
}

.popup-content {
padding: 10px;
}

.popup-content img {
max-width: 100%;
height: auto;
}
Этот подход должен обеспечить, что при наведении на активную дату появится всплывающее окно с информацией о походе и фото.