Игорь Надеин
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
..
2025-10-28 08:29:43 +03:00
2025-12-08 11:21:31 +03:00
2025-12-18 10:19:47 +03:00
2025-11-20 09:00:55 +03:00
2026-02-11 12:52:25 +03:00
2026-02-11 12:52:25 +03:00
2026-02-11 12:57:07 +03:00
2026-02-11 12:52:25 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2026-01-12 17:37:41 +03:00
2026-01-12 17:37:41 +03:00
2026-01-22 01:33:42 +03:00
2025-11-28 10:09:23 +03:00
2025-11-28 10:09:23 +03:00
2026-01-14 17:32:06 +03:00
2025-11-30 12:21:36 +03:00
2026-01-12 17:37:41 +03:00
2026-01-22 01:33:42 +03:00
2026-01-08 14:39:40 +03:00
2026-01-13 09:19:19 +03:00
2026-01-22 01:33:42 +03:00
2025-11-20 09:00:55 +03:00
2025-11-27 17:23:13 +03:00
2025-11-20 09:00:55 +03:00
2025-11-29 13:52:21 +03:00
2025-11-20 12:54:01 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-11-21 12:46:43 +03:00
2025-11-20 09:00:55 +03:00
2025-12-03 14:42:26 +03:00
2025-12-05 13:19:04 +03:00
2025-12-08 13:37:20 +03:00
2025-11-20 09:00:55 +03:00
2025-12-08 11:07:45 +03:00
2025-12-30 10:35:34 +03:00
2025-12-03 13:48:31 +03:00
2025-11-29 13:52:21 +03:00
2025-11-29 13:52:21 +03:00
2025-12-05 10:56:23 +03:00
2025-12-05 09:57:54 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2026-02-06 15:42:57 +03:00
2025-11-20 09:00:55 +03:00
2025-10-28 08:40:25 +03:00
2025-12-02 14:02:10 +03:00
2026-01-06 08:11:24 +03:00
2026-01-15 11:13:54 +03:00
2026-01-15 11:13:54 +03:00
2026-01-15 11:13:54 +03:00
2025-12-01 14:19:58 +03:00
2025-11-20 09:00:55 +03:00
2025-12-05 11:10:02 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-12-03 13:48:31 +03:00
2025-12-08 12:09:32 +03:00
2025-12-08 12:09:32 +03:00
2025-11-29 13:52:21 +03:00
2025-12-05 15:59:21 +03:00
2026-01-05 14:35:19 +03:00
2026-01-22 01:33:42 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-11-20 09:00:55 +03:00
2025-12-17 09:14:34 +03:00
2025-11-29 13:52:21 +03:00
2025-11-29 16:41:03 +03:00
2026-01-15 11:13:54 +03:00