← Назад до портфоліо

Календар зайнятостіПриватний

Календар зайнятості main image

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

Задача

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

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

Часті запитання

Для чого потрібен проєкт «Employment Cal»?

Employment_cal — це динамічний календарний додаток, призначений для спрощення планування та управління зайнятістю, з інтерактивними денними, списковими та часовими переглядами. Використовуючи надійні бібліотеки, такі як FullCalendar та Bootstrap, він забезпечує безшовний користувацький досвід для ефективної організації завдань та подій.

Який стек у «Employment Cal»?

Технології: fullcalendar/core, fullcalendar/daygrid, fullcalendar/interaction, fullcalendar/list, fullcalendar/timegrid, bootstrap, bootstrap-select, choices.js, lodash, text-encoding-utf-8, toastify-js, vite-plugin-remove-console.

Інформація про проект

CommercialCompleted

  • Створено: 04 Sep 2023
  • Оновлено: 16 Dec 2024

Використані технології

fullcalendar/corefullcalendar/daygridfullcalendar/interactionfullcalendar/listfullcalendar/timegridbootstrapbootstrap-selectchoices.jslodashtext-encoding-utf-8toastify-jsvite-plugin-remove-console

Мови

CSS (47.3%)TypeScript (25.5%)JavaScript (24.6%)HTML (2.6%)