Corp/docs/completed/CALENDAR_EVENT_OVERLAY_FIX.md

Исправление наложения событий в календаре

Дата: 11 февраля 2026 г. Тип: Исправление бага Компонент: Календарь (FullCalendar)

Проблема

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

Причина

Проблема была в управлении z-index для разных типов событий:

1. Однодневные события (.fc-daygrid-event-harness):

   • position: relative
   • z-index: 1 (у самого события)

2. Многодневные события (.fc-daygrid-event-harness-abs):

   • position: absolute (необходимо для FullCalendar)
   • z-index: 2 (выше однодневных)

Это приводило к тому, что многодневные события всегда отображались поверх однодневных.

Решение

1. Изменена иерархия z-index

// Однодневные события - ВЫШЕ в стеке
.fc-daygrid-event-harness {
  z-index: 2; // Базовый z-index для контейнера обычных событий
}

// Многодневные события - НИЖЕ в стеке
.fc-daygrid-event-harness-abs {
  z-index: 1; // Ниже, чем у обычных событий
}

// Сами события имеют z-index: 3 для правильной работы hover
.fc-event {
  z-index: 3;
}

2. Улучшен hover эффект

.fc-event:hover {
  z-index: 200 !important; // Очень высокий z-index при hover
  transform: translateY(-1px);
}

Теперь при наведении любое событие (многодневное или однодневное) поднимается над всеми остальными.

Результат

✅ Однодневные события теперь отображаются поверх многодневных ✅ При hover любое событие поднимается на передний план ✅ Улучшена интерактивность календаря ✅ Сохранена правильная работа FullCalendar с позиционированием

Файлы изменены

• backend/static/scss/components/_calendar-events.scss - исправлена иерархия z-index
• backend/static/css/app.css - пересобран из SCSS

Техническая деталь

Почему многодневные события position: absolute?

FullCalendar использует position: absolute для многодневных событий (.fc-daygrid-event-harness-abs), чтобы:

1. Динамически вычислять позицию top для каждого ряда событий
2. Растягивать события через несколько ячеек (left: 0; right: 0)
3. Автоматически управлять высотой рядов

Это требование FullCalendar, и его нельзя изменить без поломки функциональности.

Почему однодневные события position: relative?

Однодневные события (.fc-daygrid-event-harness) используют обычный document flow с position: relative, что позволяет им:

1. Автоматически располагаться друг под другом
2. Не зависеть от абсолютного позиционирования
3. Легко взаимодействовать с DOM

Решение через z-index layering

Вместо изменения позиционирования (что сломает FullCalendar), мы используем правильную иерархию z-index:

Слой 200: События при hover (любые)
Слой 3:   Сами события (все)
Слой 2:   Контейнер однодневных событий
Слой 1:   Контейнер многодневных событий

Это обеспечивает:

• Однодневные события выше многодневных по умолчанию
• Любое событие при hover поднимается над всеми
• FullCalendar продолжает правильно работать

Тестирование

После изменений проверьте:

1. ✅ Создайте однодневное событие
2. ✅ Создайте многодневное событие в тот же день
3. ✅ Убедитесь, что однодневное событие видно
4. ✅ Проверьте hover на оба типа событий
5. ✅ Убедитесь, что "+N ещё" работает корректно

Связанные изменения

• Используется настройка FullCalendar: eventOverlap: false (уже была)
• Используется настройка FullCalendar: dayMaxEventRows: 5 (уже была)
• Сохранена анимация fadeInEvent для всех событий