Игорь Надеин 28e2f1615f feat: реализован drag & drop для перемещения событий между календарями

- Создан модуль calendarEventDragDrop.js с классами DragDropState и CalendarUtils
- Реализовано перетаскивание событий между календарями через модальное окно
- Добавлена кнопка 'Переместить все' для массового перемещения
- Модальное окно отображает источник и цель перемещения
- Поддержка legacy-календарей (company/department/personal)
- Добавлены стили для подсветки drop-target (папки и календари)
- Backend: исправлена обработка null значений в serializer
- Backend: добавлен endpoint list_raw для получения немодерируемых событий
- Использованы стандартные Bootstrap стили для модалов
- Исправлено всплытие событий dragover/drop (stopPropagation)
- Эмодзи иконки для типов календарей (����)
- Toast уведомления об успехе/ошибках перемещения

2026-02-12 15:59:53 +03:00

5.3 KiB

Raw Blame History

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

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

Проблема

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

Причина

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

Однодневные события (.fc-daygrid-event-harness):
- position: relative
- z-index: 1 (у самого события)
Многодневные события (.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), чтобы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.3 KiB Raw Blame History Unescape Escape