Просмотр календаря

Календарь предоставляет интерактивную визуализацию задач и событий на базе FullCalendar.

Возможности

• Виды: месяц, неделя и день — переключение между детализациями календаря
• Карточки задач — каждая задача отображается на дате выполнения с заголовком и цветом в зависимости от статуса
• События календаря — создание, редактирование и удаление персональных событий
• События видеокомнат — запланированные видеоконференции отображаются на календаре
• Клик для просмотра — клик по задаче открывает панель деталей задачи
• Адаптация под язык — язык календаря переключается между русским и английским в зависимости от настройки i18n приложения

API Endpoints

Метод	Путь	Описание
GET	/api/events	Список событий в диапазоне (?from=&to=)
POST	/api/events	Создать событие
GET	/api/events/:id	Детали события
PATCH	/api/events/:id	Обновить событие
DELETE	/api/events/:id	Удалить событие

Фронтенд

Маршрут

Маршрут	Представление	Описание
/calendar	CalendarView	Полный календарь с задачами и событиями

Store календаря

const store = useCalendarStore()
const { events, loading } = storeToRefs(store)

await store.fetchEvents(from, to)  // Загружает задачи с датами выполнения
await store.createEvent({ title, start, end, allDay, color })
await store.updateEvent(id, { title, start, end, allDay, color })
await store.deleteEvent(id)

Детали реализации

• Календарь загружает все задачи с датами выполнения в проектах пользователя
• Каждая задача отображается как событие с:
  • Заголовком
  • Цветом статуса (todo=серый, in_progress=синий, in_review=жёлтый, done=зелёный, cancelled=красный)
  • Обработчиком клика, который переходит к детальному просмотру задачи
• Персональные события создаются через Events API и отображаются с выбранным пользователем цветом
• Запланированные видеокомнаты автоматически создают события календаря с типом video
• Язык привязан реактивно к i18n локали — переключение языка также переключает названия месяцев и текст UI календаря
• FullCalendar импортируется из @fullcalendar/core с плагинами @fullcalendar/daygrid, @fullcalendar/timegrid, @fullcalendar/list и @fullcalendar/interaction