Описание и детали проекта

Задача

Заказчику нужен был единый календарь занятости вместо разрозненных таблиц и переписки в мессенджерах. Менеджеры и сотрудники должны видеть смены, занятость и события в одном месте, быстро переключаться между дневным, списковым и почасовым представлением и не терять контекст при планировании на неделю вперёд.

Проект коммерческий, закрытый (без публичного репозитория), но типовой для линейки full-stack веб-приложений и дашбордов: rich UI, формы, фильтры, уведомления.

Решение

Собран SPA-календарь на FullCalendar с несколькими режимами отображения (day grid, time grid, list). Навигация и фильтры оформлены через Bootstrap и bootstrap-select, для выпадающих списков с поиском использован choices.js.

Пользователь работает в привычной календарной сетке: drag-and-drop и клики по слотам, быстрые toast-уведомления через toastify-js, без перезагрузки страницы. Данные подготавливаются на клиенте с помощью lodash (группировка, сортировка, нормализация дат).

Архитектура и стек

UI: FullCalendar (core, daygrid, timegrid, list, interaction), Bootstrap 5, кастомные стили (CSS ~47% кодовой базы).

Клиентская логика: TypeScript и JavaScript (~50% вместе) — типизация моделей событий, обработчики календаря, локализация под UTF-8 (text-encoding-utf-8 для корректной работы с кириллицей в экспорте/импорте).

Сборка: Vite с vite-plugin-remove-console для production-сборок без лишнего шума в консоли.

Интерактивность календаря вынесена в отдельные модули: конфиг представлений, единый store событий, слой адаптеров под API заказчика (контракт не публикуется).

Ключевые функции

• Три представления календаря — день, список, почасовая сетка; переключение без потери фильтров.
• Фильтры и селекты — bootstrap-select и choices.js для длинных справочников (подразделения, роли, типы смен).
• Обратная связь — toastify-js для успешного сохранения и ошибок валидации.
• Подготовка данных — lodash для агрегации занятости по периодам и нормализации часовых поясов на клиенте.
• Production-ready сборка — удаление console.log, оптимизация бандла под корпоративный хостинг.

Результат

Команда перешла с ручного планирования в таблицах на единый календарный интерфейс. Сократилось время согласования смен: менеджер видит пересечения и «дыры» в графике сразу в day/time view. Проект завершён (обновления до декабря 2024) и используется как внутренний инструмент.

Что бы улучшил

Добавил бы offline-кеш критичных диапазонов дат и e2e-тесты на сценарии drag-and-drop в time grid. Для enterprise — аудит-лог изменений слотов и SSO через корпоративный IdP.