Calendar View

The calendar provides an interactive visualization of tasks and events powered by FullCalendar.

Features

• Month, week, and day views — switch between calendar granularities
• Task cards — each task displays on its due date with title and status color
• Calendar events — create, edit, and delete personal events
• Video room events — scheduled video conferences display on the calendar
• Click to view — clicking a task opens the task detail panel
• Language adaptation — calendar language switches between Russian and English based on the app's i18n setting

API Endpoints

Method	Path	Description
GET	/api/events	List events in range (?from=&to=)
POST	/api/events	Create event
GET	/api/events/:id	Get event details
PATCH	/api/events/:id	Update event
DELETE	/api/events/:id	Delete event

Frontend

Route

Route	View	Description
/calendar	CalendarView	Full calendar with tasks and events

Calendar Store

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

await store.fetchEvents(from, to)  // Loads tasks with due dates
await store.createEvent({ title, start, end, allDay, color })
await store.updateEvent(id, { title, start, end, allDay, color })
await store.deleteEvent(id)

Implementation Details

• The calendar loads all tasks with due dates across the user's projects
• Each task displays as an event with:
  • Title
  • Status color (todo=gray, in_progress=blue, in_review=yellow, done=green, cancelled=red)
  • Click handler that navigates to task detail view
• Personal events are created via the Events API and display with the user's chosen color
• Scheduled video rooms automatically create calendar events with type video
• Language is reactively bound to i18n locale — switching language also switches calendar month names and UI text
• FullCalendar is imported from @fullcalendar/core with plugins @fullcalendar/daygrid, @fullcalendar/timegrid, @fullcalendar/list, and @fullcalendar/interaction