Почтовый календарь

Live Preview

Описание

Почтовый календарь — веб-приложение, разработанное на React и TypeScript, которое имитирует календарь современного почтового клиента. Пользователь может просматривать события в виде календарной сетки месяца, переключаться между месяцами, просматривать занятость коллег.

Проект выполнен с использованием React, TypeScript и Vite.

Функционал

Календарь

• Отображение календарной сетки месяца.
• Начало недели с понедельника.
• Корректное отображение дней предыдущего и следующего месяцев.
• Переход между месяцами.
• Быстрый переход к текущему месяцу.
• Переход на соответствующий месяц при клике по дню предыдущего или следующего месяца.
• Выделение текущего дня.

События

• Отображение событий в соответствующих датах.
• Цветовая индикация событий.
• Отображение нескольких событий, начинающихся одновременно, в одной строке.
• Автоматическая прокрутка списка событий внутри дня при переполнении.
• Сокрытие длинных названий событий.

Календари коллег

• Возможность включать и отключать отображение календарей коллег.
• Для выбранных коллег отображаются события занятости с названием «Занят».
• Цвет событий совпадает с цветом выбранного коллеги в боковом меню.

Интерфейс

• Адаптивный Sidebar.
• Прокрутка меню Sidebar при переполнении.
• SVG-иконки через SVGR.

API

• Подготовлена работа с Mock Service Worker (MSW) для эмуляции REST API.

Стек

Frontend

• React
• TypeScript
• Vite

Работа с датами

• date-fns

Стилизация

• SCSS Modules

Работа с API

• Mock Service Worker (MSW)

Дополнительно

• SVGR (vite-plugin-svgr) для импорта SVG как React-компонентов.

Установка

git clone https://github.com/VikaGovorina/mail_calendar.git
npm install

Запуск

npm run dev