fix: улучшена визуализация многодневных событий календаря

Проблема:
- Многодневные события отображались странно
- Не было визуальной связи между сегментами
- Закругления и отступы были некорректными

Решение:

1. Визуальные индикаторы продолжения
   - Первый день: стрелка › справа
   - Средние дни: стрелки ‹ › с обеих сторон
   - Последний день: стрелка ‹ слева
   - Цвет стрелок: белый с opacity 0.7

2. Правильные закругления углов
   - Первый день: слева закруглено, справа прямо
   - Средние дни: без закруглений
   - Последний день: слева прямо, справа закруглено
   - Один день: закруглено со всех сторон

3. Убраны лишние отступы
   - margin-left/right: 0 для соединённых сегментов
   - Увеличен padding для стрелок (+2px)
   - Высота увеличена до 22px для читаемости

4. Улучшенное позиционирование
   - Многодневные события в отдельном слое (z-index: 2)
   - Абсолютное позиционирование для пересечений
   - Правильные отступы между сегментами

Результат:
✅ Многодневные события визуально связаны
✅ Понятно где начало/середина/конец
✅ Стрелки указывают направление
✅ Сегменты плотно соединены
✅ Улучшенная читаемость
This commit is contained in:
admin i 2026-02-11 13:00:03 +03:00
parent db2be4b469
commit 2332680d31
3 changed files with 123 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -126,23 +126,122 @@ $event-max-lines: 2;
// События на весь день
.fc-event.fc-daygrid-block-event {
padding: ($event-padding-y + 1px) $event-padding-x !important;
min-height: 20px;
}
// Многодневные события - закругления только с нужных сторон
// ============================================================================
// МНОГОДНЕВНЫЕ СОБЫТИЯ (УЛУЧШЕННАЯ ВИЗУАЛИЗАЦИЯ)
// ============================================================================
// Базовые стили для всех многодневных событий
.fc-event.fc-daygrid-event {
// Убираем отступы между сегментами
margin-top: 0 !important;
margin-bottom: 2px !important;
// Улучшенная высота для читаемости
min-height: 22px;
// Выравнивание контента
display: flex;
align-items: center;
}
// Событие начинается (первый день)
.fc-event.fc-event-start:not(.fc-event-end) {
border-radius: $event-radius 0 0 $event-radius !important;
margin-right: 0 !important;
padding-right: ($event-padding-x + 2px) !important;
// Визуальный индикатор продолжения
position: relative;
&::after {
content: '›';
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: bold;
opacity: 0.7;
}
}
.fc-event:not(.fc-event-start).fc-event-end {
border-radius: 0 $event-radius $event-radius 0 !important;
margin-left: 0 !important;
}
// Событие продолжается (средние дни)
.fc-event:not(.fc-event-start):not(.fc-event-end) {
border-radius: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: ($event-padding-x + 2px) !important;
padding-right: ($event-padding-x + 2px) !important;
// Визуальные индикаторы продолжения с обеих сторон
position: relative;
&::before {
content: '‹';
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: bold;
opacity: 0.7;
}
&::after {
content: '›';
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: bold;
opacity: 0.7;
}
}
// Событие заканчивается (последний день)
.fc-event:not(.fc-event-start).fc-event-end {
border-radius: 0 $event-radius $event-radius 0 !important;
margin-left: 0 !important;
padding-left: ($event-padding-x + 2px) !important;
// Визуальный индикатор начала
position: relative;
&::before {
content: '‹';
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: bold;
opacity: 0.7;
}
}
// Событие в один день (начинается и заканчивается)
.fc-event.fc-event-start.fc-event-end {
border-radius: $event-radius !important;
margin-left: 2px !important;
margin-right: 2px !important;
// Убираем индикаторы
&::before,
&::after {
display: none;
}
}
// Для событий с цветом календаря - индикаторы белые
.fc-event[data-has-calendar-color="true"] {
&::before,
&::after {
color: #ffffff;
}
}
// ============================================================================
@ -187,6 +286,22 @@ $event-max-lines: 2;
margin-bottom: 1px;
}
// Контейнер для многодневных событий (отдельная секция сверху)
.fc-daygrid-event-harness-abs {
// Абсолютное позиционирование для многодневных
position: absolute;
left: 0;
right: 0;
// Z-index выше обычных событий
z-index: 2;
}
// Убираем лишние отступы для многодневных событий
.fc-daygrid-day-bg + .fc-daygrid-day-events {
margin-top: 2px;
}
// ============================================================================
// ССЫЛКА "+N ЕЩЁ"
// ============================================================================