Игорь Надеин
db2be4b469
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
2026-02-11 12:57:07 +03:00
..
2026-02-11 12:52:25 +03:00
2025-09-09 17:55:15 +03:00
2026-02-11 12:52:25 +03:00
2026-01-05 11:20:56 +03:00
2026-01-22 01:33:42 +03:00
2026-01-22 01:33:42 +03:00
2026-01-09 14:56:44 +03:00
2026-02-06 15:33:48 +03:00
2026-01-22 01:33:42 +03:00
2026-01-09 14:48:43 +03:00
2025-11-20 09:00:55 +03:00
2025-07-30 08:15:53 +03:00
2026-01-13 10:19:26 +03:00
2026-01-22 01:33:42 +03:00
2026-01-22 01:33:42 +03:00
2026-01-13 15:02:29 +03:00
2025-09-11 17:56:33 +03:00
2026-02-11 12:57:07 +03:00
2026-02-11 12:57:07 +03:00
2026-02-11 12:52:25 +03:00
2025-07-30 08:15:53 +03:00
2026-01-05 10:47:56 +03:00
2026-01-08 16:14:00 +03:00
2026-02-11 12:52:25 +03:00
2025-11-20 09:00:55 +03:00
2025-09-03 17:17:44 +03:00
2026-02-11 12:52:25 +03:00
2025-07-30 08:15:53 +03:00
2026-01-05 07:41:34 +03:00
2026-01-22 01:33:42 +03:00
2026-01-08 16:14:00 +03:00
2026-01-06 07:48:04 +03:00
2026-02-11 12:52:25 +03:00
2026-02-11 12:52:25 +03:00
2026-01-08 16:55:54 +03:00
2026-01-09 15:07:55 +03:00
2026-01-22 01:33:42 +03:00
2026-01-22 01:33:42 +03:00
2026-01-22 01:33:42 +03:00
2026-01-13 09:18:25 +03:00