Игорь Надеин
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
40 lines
1.4 KiB
HTML
40 lines
1.4 KiB
HTML
{% load static %}
|
||
{# === JavaScript инициализация календаря === #}
|
||
|
||
<script type="module">
|
||
import { initCalendarWidget } from '{% static "js/components/calendarWidget.js" %}';
|
||
import { integrateCalendarManager } from '{% static "js/components/calendarWidgetIntegration.js" %}';
|
||
|
||
// Функция инициализации интеграции
|
||
function initializeIntegration() {
|
||
// Проверяем, есть ли уже виджет
|
||
const widget = window.calendarWidget || initCalendarWidget();
|
||
|
||
if (widget) {
|
||
window.calendarWidget = widget;
|
||
|
||
// Интеграция с менеджером календарей
|
||
const integration = integrateCalendarManager(widget);
|
||
if (integration) {
|
||
window.calendarIntegration = integration;
|
||
console.log('[Calendar] Integration initialized with multiple calendars support');
|
||
} else {
|
||
console.warn('[Calendar] Integration failed to initialize');
|
||
}
|
||
} else {
|
||
console.warn('[Calendar] Widget not found, retrying in 500ms...');
|
||
setTimeout(initializeIntegration, 500);
|
||
}
|
||
}
|
||
|
||
// Инициализация после загрузки DOM
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initializeIntegration);
|
||
} else {
|
||
// DOM уже загружен
|
||
initializeIntegration();
|
||
}
|
||
</script>
|
||
|
||
|