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

208 lines
6.1 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 🔍 Команды для отладки календаря через консоль браузера
Откройте консоль браузера (F12 → Console) и выполните эти команды:
## 1️⃣ Проверить наличие интеграции
```javascript
// Должно вернуть объект, а не undefined
window.calendarIntegration
```
**Ожидаемый результат:**
```javascript
{
fetchEventsForVisibleCalendars: ƒ,
getVisibleCalendarIds: ƒ,
getCalendars: ƒ,
setVisibleCalendars: ƒ,
refresh: ƒ,
instances: {manager: {...}, modal: {...}, widget: {...}}
}
```
**Если undefined** → интеграция не инициализировалась!
---
## 2️⃣ Проверить виджет календаря
```javascript
window.calendarWidget
```
**Должен вернуть объект FullCalendar**
---
## 3️⃣ Проверить список календарей
```javascript
// Если интеграция работает:
window.calendarIntegration.getCalendars()
// Должно вернуть массив календарей:
// [{id: 1, title: "Personal", color: "#0d6efd", ...}, ...]
```
---
## 4️⃣ Проверить видимые календари
```javascript
window.calendarIntegration.getVisibleCalendarIds()
// Должно вернуть массив ID: [1, 2, 3]
```
---
## 5️⃣ Вручную загрузить события
```javascript
// Попробовать загрузить события для видимых календарей
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️⃣ Проверить, загружен ли скрипт интеграции
```javascript
// Проверить, есть ли в DOM скрипт
document.querySelector('script[src*="calendarWidgetIntegration"]')
// Должен вернуть <script> элемент, если файл подключен
```
---
## 7️⃣ Вручную инициализировать интеграцию
Если интеграция не загрузилась автоматически, попробуйте вручную:
```javascript
// 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️⃣ Перезагрузить события календаря
```javascript
// После того как интеграция инициализирована
if (window.calendarWidget && window.calendarWidget.refetchEvents) {
window.calendarWidget.refetchEvents();
console.log('🔄 Events refetched');
}
```
---
## 9️⃣ Проверить контейнер списка календарей
```javascript
// Проверить, существует ли контейнер
const container = document.getElementById('calendarListContainer');
console.log('Container exists:', !!container);
console.log('Container HTML:', container?.innerHTML.substring(0, 200));
```
---
## 🔟 Проверить модальное окно
```javascript
// Проверить, есть ли модальное окно
const modal = document.getElementById('calendarManageModal');
console.log('Modal exists:', !!modal);
// Попробовать открыть модальное окно
if (window.calendarIntegration?.instances?.modal) {
window.calendarIntegration.instances.modal.openForCreate();
}
```
---
## 🐛 Диагностика проблемы
Выполните все команды по порядку и скопируйте результаты. Это поможет понять, на каком этапе происходит сбой:
```javascript
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`:
```javascript
// Найти все 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)));
```
---
## 📊 Полный отчёт о состоянии
Скопируйте и выполните весь блок:
```javascript
(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;
})();
```
---
Выполните команды и покажите результаты! 🔍