Задача

Замовнику потрібен був єдиний календар зайнятості замість розрізнених таблиць і переписки в месенджерах. Менеджери та співробітники повинні бачити зміни, зайнятість і події в одному місці, швидко перемикатися між денним, списковим та погодинним виглядом і не втрачати контекст під час планування на тиждень вперед.

Проект комерційний, закритий (без публічного репозиторію), але типовий для лінійки 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.