Календарь событий (React + TypeScript + Vite)

Примечание: месячная сетка сделана в формате 6x7 (а не 5x7), чтобы в любых месяцах корректно отображались все даты вместе с днями-соседями по неделям, без обрезки последних ячеек.

Функциональность

• Фильтрация событий по выбранным коллегам.
• Открытие модального окна с деталями при клике на событие.
• Навигация между месяцами (вперед/назад).
• Переход к текущей дате по кнопке «Сегодня».
• Логика занятости по приоритету: если в событии участвуют несколько выбранных коллег, отображается коллега с более высоким приоритетом.

API и данные

В проекте настроен Mock Service Worker (MSW), который мокирует API-ответы для календаря.

Используемые endpoint'ы:

• GET /api/events?month=YYYY-MM - получить события за месяц.
• GET /api/events/:id - получить детали события по id.

Данные отдаются из локальных JSON-моков (src/mocks/data/*.json)

Технические решения

Redux в проекте осознанно не использовался.
Решение принято, чтобы сохранить реализацию максимально близкой к требуемому стеку и объему задачи: управление состоянием сделано через локальные React-хуки и модульные хелперы.

Архитектура

Текущая структура проекта модульная:

• src/modules
  • calendar - календарь, навигация, загрузка и отображение событий.
  • sidebar - фильтры коллег и элементы боковой панели.
  • event - карточка события, модалка деталей.
• src/shared
  • api - клиент API.
  • components/Icons - общие SVG-иконки.
  • styles - глобальные стили и дизайн-токены.
• src/layout - композиция основных блоков страницы.
• src/mocks - MSW-обработчики и мок-данные.

Запуск проекта

npm install
npm run dev

Сборка:

npm run build

Проверка линтинга:

npm run lint