refactor: компактное отображение событий календаря через SCSS
Проблемы:
- События накладывались друг на друга
- Пилюли событий были раздуты
- CSS вместо SCSS
- Inline styles захламляли JS
Решение:
1. Новый SCSS модуль _calendar-events.scss
- Компактные события: 10px шрифт, 2px padding, 18px min-height
- Двухцветная схема через data-атрибуты
- Управление стеком: max-height 72px (~4 события)
- Hover, анимации, адаптивность
- Кастомные scrollbar для popover
2. Упрощённый JavaScript
- Только цвета через inline styles
- Всё остальное через SCSS (padding, border, shadow)
- Data-атрибуты: [data-has-calendar-color], [data-recurrence]
- Убраны все inline hover-листенеры
3. Оптимизация FullCalendar
- dayMaxEvents: true - автоматически '+N еще'
- dayMaxEventRows: 4 - максимум 4 строки
- eventMaxStack: 3 - до 3 в стеке
- Ячейка дня: min-height 80px
- События: max-height 72px контейнера
4. Компактный дизайн
- Граница календаря: 3px (было 4px)
- Padding: 2px 4px (было 6px 4px)
- Font-size: 10px (было 11px)
- Line-clamp: 2 строки (было 3)
- Margin: 1px 2px (плотнее)
5. Производительность
- will-change для GPU ускорения
- Убраны лишние event listeners
- CSS animations вместо JS
- Transition только на hover
Результат:
✅ События компактные и не накладываются
✅ Читаемость сохранена (белый текст + тень)
✅ Двухцветная схема работает (граница + фон)
✅ +N еще при >4 событиях в день
✅ SCSS архитектура (не inline CSS)
✅ Быстрые hover эффекты через CSS
Игорь Надеин
db2be4b469