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

**Дата:** 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

```scss
// Однодневные события - ВЫШЕ в стеке
.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 эффект

```scss
.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` для всех событий