Fix Calendar Navigation and Create Events List Page

Problem

After the widget refactor (#70 (closed)), two issues were identified:

  1. Calendar visibility issue: Events created outside the current 7-day calendar view are not visible to users. When creating an event for a date beyond the displayed week, users cannot see their newly created event.

  2. Missing /events route: The "View all" link in the Next Events widget leads to a 404 error because the /events page does not exist.

Acceptance Criteria

Calendar Navigation

  • CalendarView has prev/next week navigation buttons
  • "Today" button resets calendar to current week
  • Navigation is keyboard accessible (arrow keys, tab)
  • Visual indicators show current week vs other weeks

Event Creation Flow

  • After creating an event, user sees a success toast notification
  • After creating an event, redirect to event detail page /events/{id}
  • This ensures user sees their created event regardless of its date

Events List Page (/events)

  • Route displays all upcoming events sorted by date (ascending)
  • Each event rendered using EventCard component
  • Each event links to its detail page
  • "Create Event" button present in header
  • Empty state shown when no upcoming events exist
  • Loading state displayed while fetching events
  • Error state with retry option on fetch failure
  • i18n translations for EN and DE

Testing

  • Unit tests for CalendarView navigation logic
  • Component tests for new navigation UI
  • All existing tests still pass (112 tests)

Implementation Plan

Files to Create

  • app/pages/events/index.vue - Events list page

Files to Modify

  • app/components/composite/CalendarView.vue - Add navigation controls
  • app/pages/events/new.vue - Update redirect after event creation
  • i18n/locales/en.json - Add new translations
  • i18n/locales/de.json - Add new translations
  • tests/unit/components/CalendarView.spec.ts - Add navigation tests

Technical Notes

CalendarView Changes

// Add startDate prop with v-model support
const props = withDefaults(defineProps<Props>(), {
  startDate: () => new Date()
})

const emit = defineEmits<{
  "update:startDate": [date: Date]
}>()

New Translations Needed

"events": {
  "title": "All Events",
  "upcoming": "Upcoming Events",
  "noUpcoming": "No upcoming events scheduled"
},
"calendar": {
  "previousWeek": "Previous week",
  "nextWeek": "Next week",
  "today": "Today"
}

Priority

High - Broken link affects user experience

Related