Персональный органайзер с Канбан-доской, календарём, аналитикой и целями. Проект создан для удобного планирования дня, недели и месяца с упором на визуальную чистоту и скорость взаимодействия.
Три режима просмотра: день, неделя, месяц.
Создание событий:
- Drag-to-create в недельном/дневном календаре — зажми и потяни по сетке, сразу введи название на месте
- Создание через клик по часу (открывается модалка с двойным ползунком времени)
- Inline-редактирование названия и описания по клику/даблклику
Перетаскивание:
- Drag-and-drop событий с кастомным ghost-элементом и анимациями
Alt+ Drag — копирование события- Авто-скролл при перетаскивании к краям
- Trash drop zone — перетащи событие в корзину для удаления
Временные циклы:
- Compact Mode — скрывает ночные часы (настраивается
dayStartHour/dayEndHour, по умолчанию 7–23) - Sleep Mode — скрывает произвольный диапазон часов (например, 0–7)
- Индикаторы «спящих» промежутков с надписью
00:00 — 07:00 - Сохранение настроек в localStorage
Повторение событий:
- Еженедельное повторение с выбором дней недели
- Дата окончания повторения
- Ограничение по количеству повторений
- Бэкенд разворачивает повторения в отдельные экземпляры при запросе
Редактирование:
- Двойной ползунок (rangе) для выбора времени начала/конца
- Выбор тега и цвета из палитры
- Отметка «Важное событие» (★)
- Drag-and-drop тега из панели тегов на событие
- Drag-and-drop задач из Inbox/Kanban на событие
Inline-задачи внутри событий:
- Чекбоксы для выполнения задач без открытия модалки
- Квик-адд задач по кнопке
+ - Счётчик задач и прогресс-бар
- Индикатор
+Nпри переполнении - Бейдж с количеством задач на событии
Визуал:
- Акцентный режим (нейтральный фон + цветная иконка/полоска)
- Монохромная цветовая схема
- Контрастные цвета текста (автоматический расчёт через
getContrastColors) - Кастомные SVG-иконки тегов
- Линия текущего времени (красная)
- Bounce-анимация при дропе события
Горячие клавиши:
←/→— навигация по неделям/месяцамCtrl+Z/Ctrl+Я— отмена действия (undo)Ctrl+C/Ctrl+V— копировать/вставить событиеDelete/Backspace— удалить выбранное событиеEscape— снять выделение
- Несколько досок с табами
- Колонки: To Do, In Progress, Done + кастомные категории
- Inbox — единый список для сбора всех задач
- Drag-and-drop задач между колонками
- Перетаскивание задач из Inbox/Kanban прямо на событие в календаре
- Drag-and-drop категорий из Inbox на события календаря
- Автоматическая привязка всех задач категории к событию при дропе категории
- Цветовая маркировка событий и задач
- Кастомные иконки для тегов (библиотека SVG)
- Палетка цветов с предустановленными и недавними цветами
- Eyedropper — открывает нативный
<input type="color"> - Панель управления тегами (добавление, удаление, с прокруткой)
- Процент занятости по дням (сколько времени запланировано)
- График распределения времени по тегам
- Аналитика за неделю/месяц
- Заглушка с иконкой трофея
- Готовый модуль для будущей реализации
- Установка фонового изображения с регулировкой прозрачности
- Тёмная/светлая тема (глобальный CSS-переключатель)
eventAccentMode— переключение режима отображения событий- Zoom-ползунок для изменения высоты часа (60–300px)
- Сохранение масштаба отдельно для week/day
- Отложить событие на потом
- Хранятся в localStorage
- Панель со всеми snoozed-событиями
- Возможность вернуть событие в календарь перетаскиванием
- По тегам (мультивыбор)
- По важности (только важные)
- Боковая панель фильтра
- Выпадающая навигационная панель ThreeDotsMenu (появляется при наведении)
- Страницы: Landing → Calendar / Kanban / Statistics / Goals
- Плавные page-transition анимации (fade + slide)
- Авто-редирект на последний посещённый маршрут (localStorage)
- Полностью тёмная тема, минималистичный дизайн
- Скруглённые углы у событий во всех видах
| Компонент | Технология |
|---|---|
| Frontend | Vue 3 (Composition API + <script setup>) |
| Типизация | TypeScript |
| Стейт-менеджмент | Pinia |
| Роутинг | Vue Router |
| Даты | Day.js |
| Сборка | Vite |
| Backend | Python 3 + FastAPI |
| ORM | SQLAlchemy |
| Миграции | Alembic (PostgreSQL → SQLite) |
| API | REST (JSON), Swagger docs |
| Контейнеризация | Docker + Docker Compose |
| Стили | Scoped CSS, CSS Variables, CSS Transitions |
Backend API endpoints:
GET/POST /api/v1/calendar— CRUD + recurring events expansionGET/POST/PUT/DELETE /api/v1/tasks— управление задачамиGET/POST/PUT/DELETE /api/v1/tags— управление тегамиGET/POST/PUT/DELETE /api/v1/kanban— доски и колонкиPOST/DELETE /api/v1/event-tasks— связь задач с событиями
docker-compose up --buildВот команды для применения:
docker-compose up --build
docker-compose down docker-compose up --build После этого — все изменения в коде (и фронт, и бэк) подхватываются мгновенно, просто docker-compose up без --build.
После запуска:
- Frontend: http://localhost:8080
- Backend API: http://localhost:8000
- Swagger docs: http://localhost:8000/docs
Frontend:
cd frontend
npm install
npm run devBackend:
cd backend
pip install -r requirements.txt
# или: pipenv install
uvicorn app.main:app --reload| Переменная | По умолчанию | Описание |
|---|---|---|
VITE_API_BASE_URL |
/api/v1/tasks |
Базовый URL API для фронтенда |
Доступны через модальное окно настроек:
- Тема: тёмная / светлая
- Фон: изображение + прозрачность
- Рабочий день:
dayStartHour(по умолч. 7) иdayEndHour(по умолч. 23) - Sleep Mode: включение +
sleepStartHour/sleepEndHour - Event Accent Mode: нейтральный фон с цветными акцентами
- Zoom: высота часа отдельно для WeekView и DayView
| Клавиша | Действие |
|---|---|
← / → |
Навигация по неделям/месяцам/дням |
↑ / ↓ |
Навигация по месяцам (MonthView) |
Ctrl+Z / Ctrl+Я |
Отмена последнего действия |
Ctrl+C |
Копировать выбранное событие |
Ctrl+V |
Вставить скопированное событие |
Alt + Drag |
Копировать событие при перетаскивании |
Delete / Backspace |
Удалить выбранное событие |
Escape |
Снять выделение / закрыть инлайн-редактирование |
backend/
├── app/
│ ├── api/api_v1/endpoints/
│ │ ├── calendar.py # CRUD событий + развёртка повторений
│ │ ├── tasks.py # CRUD задач
│ │ ├── tags.py # CRUD тегов
│ │ ├── kanban.py # Доски и колонки Kanban
│ │ └── event_tasks.py # Связь задач с событиями
│ ├── core/ # Security, auth
│ ├── db/ # Database session, Base
│ ├── models/ # SQLAlchemy models
│ ├── schemas/ # Pydantic schemas
│ └── main.py # FastAPI app entrypoint
├── alembic/ # Миграции БД
└── Dockerfile
frontend/
├── src/
│ ├── components/
│ │ ├── calendar/ # WeekView, DayView, MonthView, Header, Inbox, Filter, Snooze
│ │ ├── modals/ # EventModal, EventTasks, TagsPanel, Settings
│ │ ├── tasks/ # TaskList, TaskCard
│ │ └── ui/ # ThreeDotsMenu, ViewSelector
│ ├── stores/ # Pinia: calendar, tasks, tags, kanban, eventSnooze
│ ├── views/ # WeeklyCalendar, KanbanDesk, Statistics, Goals, LandingPage
│ ├── router/ # Vue Router config
│ ├── utils/ # color.ts (getContrastColors)
│ ├── assets/ # SVG icons
│ └── App.vue # Root component with background, transitions
├── dist/ # Production build
└── Dockerfile
