Corp/backend/CONSOLE_DEBUG_COMMANDS.md
Игорь Надеин 281f0b2bbc feat: современное отображение событий календаря с множественным выбором
Реализовано:

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
2026-02-11 12:52:25 +03:00

6.1 KiB
Raw Blame History

🔍 Команды для отладки календаря через консоль браузера

Откройте консоль браузера (F12 → Console) и выполните эти команды:

1️⃣ Проверить наличие интеграции

// Должно вернуть объект, а не undefined
window.calendarIntegration

Ожидаемый результат:

{
  fetchEventsForVisibleCalendars: ƒ,
  getVisibleCalendarIds: ƒ,
  getCalendars: ƒ,
  setVisibleCalendars: ƒ,
  refresh: ƒ,
  instances: {manager: {...}, modal: {...}, widget: {...}}
}

Если undefined → интеграция не инициализировалась!


2️⃣ Проверить виджет календаря

window.calendarWidget

Должен вернуть объект FullCalendar


3️⃣ Проверить список календарей

// Если интеграция работает:
window.calendarIntegration.getCalendars()

// Должно вернуть массив календарей:
// [{id: 1, title: "Personal", color: "#0d6efd", ...}, ...]

4️⃣ Проверить видимые календари

window.calendarIntegration.getVisibleCalendarIds()

// Должно вернуть массив ID: [1, 2, 3]

5️⃣ Вручную загрузить события

// Попробовать загрузить события для видимых календарей
const start = new Date('2026-02-01');
const end = new Date('2026-02-28');

window.calendarIntegration.fetchEventsForVisibleCalendars(start, end)
  .then(events => {
    console.log('✅ Events loaded:', events.length);
    console.table(events);
  })
  .catch(err => {
    console.error('❌ Error:', err);
  });

6️⃣ Проверить, загружен ли скрипт интеграции

// Проверить, есть ли в DOM скрипт
document.querySelector('script[src*="calendarWidgetIntegration"]')

// Должен вернуть <script> элемент, если файл подключен

7️⃣ Вручную инициализировать интеграцию

Если интеграция не загрузилась автоматически, попробуйте вручную:

// 1. Импортировать модуль (если ES6 modules работают)
import('/static/js/components/calendarWidgetIntegration.js')
  .then(module => {
    const { integrateCalendarManager } = module;
    const integration = integrateCalendarManager(window.calendarWidget);
    window.calendarIntegration = integration;
    console.log('✅ Integration manually initialized');
  })
  .catch(err => console.error('❌ Import failed:', err));

8️⃣ Перезагрузить события календаря

// После того как интеграция инициализирована
if (window.calendarWidget && window.calendarWidget.refetchEvents) {
  window.calendarWidget.refetchEvents();
  console.log('🔄 Events refetched');
}

9️⃣ Проверить контейнер списка календарей

// Проверить, существует ли контейнер
const container = document.getElementById('calendarListContainer');
console.log('Container exists:', !!container);
console.log('Container HTML:', container?.innerHTML.substring(0, 200));

🔟 Проверить модальное окно

// Проверить, есть ли модальное окно
const modal = document.getElementById('calendarManageModal');
console.log('Modal exists:', !!modal);

// Попробовать открыть модальное окно
if (window.calendarIntegration?.instances?.modal) {
  window.calendarIntegration.instances.modal.openForCreate();
}

🐛 Диагностика проблемы

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

console.log('=== Calendar Integration Debug ===');
console.log('1. calendarIntegration:', typeof window.calendarIntegration);
console.log('2. calendarWidget:', typeof window.calendarWidget);
console.log('3. Container:', !!document.getElementById('calendarListContainer'));
console.log('4. Modal:', !!document.getElementById('calendarManageModal'));
console.log('5. Create button:', !!document.querySelector('[data-action="create-calendar"]'));
console.log('=================================');

🔧 Если интеграция undefined

Проверьте, загружается ли файл calendar_scripts.html:

// Найти все script теги с calendar
Array.from(document.querySelectorAll('script[type="module"]'))
  .filter(s => s.textContent.includes('calendar'))
  .forEach(s => console.log('Found:', s.textContent.substring(0, 100)));

📊 Полный отчёт о состоянии

Скопируйте и выполните весь блок:

(function debugCalendar() {
  const report = {
    integration: typeof window.calendarIntegration,
    widget: typeof window.calendarWidget,
    container: !!document.getElementById('calendarListContainer'),
    modal: !!document.getElementById('calendarManageModal'),
    createButton: !!document.querySelector('[data-action="create-calendar"]'),
    scripts: Array.from(document.querySelectorAll('script[type="module"]')).length,
    errors: []
  };

  if (window.calendarIntegration) {
    try {
      report.calendars = window.calendarIntegration.getCalendars().length;
      report.visibleIds = window.calendarIntegration.getVisibleCalendarIds();
    } catch (e) {
      report.errors.push('Error accessing integration: ' + e.message);
    }
  }

  console.table(report);
  return report;
})();

Выполните команды и покажите результаты! 🔍