Игорь Надеин
281f0b2bbc
Реализовано: 1. Множественный выбор календарей через чекбоксы - Заменил <select> на чекбоксы для выбора нескольких календарей - События создаются одновременно во всех выбранных календарях - При редактировании - обновляется только первый выбранный - Цветовые индикаторы для каждого календаря 2. Современный дизайн событий - Двухцветная схема: левая граница = цвет календаря, фон = цвет события - Полупрозрачный фон события (80%) для лучшей видимости - Тени и hover эффекты для объёма - Закругленные углы (4px) - Плавные анимации (transform + transition) 3. Улучшенное отображение накладывающихся событий - dayMaxEvents: автоматически показывать '+N еще' - dayMaxEventRows: 4 - максимум 4 строки на день - moreLinkClick: 'popover' - красивый popover для остальных - eventMaxStack: 3 - до 3 событий в стеке - eventOrder: сортировка по началу, длительности, алфавиту 4. Новый CSS файл calendar-improvements.css - Современные стили для FullCalendar - Улучшенный popover с градиентом - Стили для выходных дней (розоватый фон) - Hover эффекты на события - Анимация fadeInEvent при загрузке - Улучшенная читаемость текущего дня - Адаптивность для мобильных устройств - Кастомные scrollbar для списков 5. Передача цвета календаря в события - calendar_color добавляется в extendedProps - Используется __calendar из интеграции - Отдельная обработка eventColor и calendarColor 6. Визуальные улучшения - Текст события: font-weight 500, line-height 1.3 - Отступы: paddingLeft 6px (с цветом календаря) - Тень текста для читаемости на любом фоне - Паттерн для ежегодных событий (диагональные полосы) - Индикатор текущего дня: синий круг с белым текстом Результат: ✅ События визуально различимы по календарям (левая граница) ✅ Сохранён индивидуальный цвет события (основной фон) ✅ Множество событий в день отображается компактно (+N еще) ✅ Современный Material Design стиль ✅ Плавные анимации и hover эффекты ✅ Улучшенная читаемость и UX
78 lines
3.0 KiB
HTML
78 lines
3.0 KiB
HTML
{# Десктопная версия календаря - правая колонка #}
|
||
<div class="rightbar d-none d-lg-block">
|
||
<div class="card rightbar-card" data-dept-id="{{ dept_ids|default:'' }}">
|
||
<div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
|
||
|
||
<div class="d-flex align-items-center gap-2 flex-shrink-1 min-w-0">
|
||
<h6 class="card-title fw-semibold mb-0">Календарь</h6>
|
||
|
||
{# Кнопка списка календарей #}
|
||
<button
|
||
class="btn btn-sm btn-outline-primary"
|
||
type="button"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#calendarListCollapse"
|
||
aria-expanded="false"
|
||
aria-controls="calendarListCollapse"
|
||
title="Список календарей"
|
||
>
|
||
<i class="bi-list-check"></i>
|
||
<span class="ms-1">Календари</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center gap-2 flex-shrink-0">
|
||
<span class="card-sub text-muted d-none d-xl-inline">События</span>
|
||
<button
|
||
class="btn btn-sm btn-outline-success"
|
||
type="button"
|
||
data-action="create-calendar"
|
||
aria-label="Создать календарь"
|
||
title="Создать календарь"
|
||
>
|
||
<i class="bi-calendar-plus"></i>
|
||
</button>
|
||
<button
|
||
class="btn btn-sm btn-primary"
|
||
type="button"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#eventCreateModal"
|
||
aria-label="Создать событие"
|
||
title="Создать событие"
|
||
>
|
||
<i class="bi-plus-lg"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{# Список календарей (сворачиваемый) - унифицированный список legacy + новые #}
|
||
<div class="collapse" id="calendarListCollapse">
|
||
<div class="card-body border-bottom py-2">
|
||
<small class="text-muted d-block mb-2">
|
||
<i class="bi-info-circle me-1"></i>
|
||
Выберите календари для отображения
|
||
</small>
|
||
<div id="calendarListContainer" class="calendar-list-container" style="max-height: 250px; overflow-y: auto;">
|
||
|
||
{# Здесь будет JS-генерируемый список календарей (legacy + новые) #}
|
||
<div class="text-center py-3">
|
||
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
||
<span class="visually-hidden">Загрузка...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div id="calendarRight" class="calendar-wrap"></div>
|
||
|
||
<div class="week-strip-header">
|
||
<span><i class="bi-calendar-week me-1"></i> На этой неделе</span>
|
||
<span id="weekRange" class="text-muted"></span>
|
||
</div>
|
||
<div id="weekList" class="week-vertical" aria-live="polite"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|