# Trainings Calendar View - Design Spec

## Overview

Add a calendar month view to the Trainings page as an alternative to the existing grid/list views. Users can toggle between three views: **Grid**, **List**, and **Calendar**.

---

## Design

### View Toggle

Location: Top-right of the page header (already exists as grid/list toggle)

```
[+ Training hinzufügen]                    [Grid] [List] [Calendar]
```

Three icon buttons with active state highlighting. Same pattern as existing grid/list toggle.

---

### Calendar Month View

**Library:** `react-big-calendar` with custom styling to match Shadcn design

**Layout:**
- Full-width month grid
- Weekdays: Mo Di Mi Do Fr Sa So (German)
- Month/Year header with `<` `>` navigation arrows
- "Today" button to jump to current month

**Day Cells:**
- Show up to 3 training chips per day (colored by group)
- "+N more" indicator if more trainings exist
- Today highlighted with accent ring
- Past days slightly muted

**Training Chips:**
- Small colored pills showing time + group badge
- Colors match existing groupConfig:
  - kids: primary
  - youth: secondary  
  - adults: accent

**Click on Day:**
- Opens a popover/dropdown showing all trainings for that day
- Each training shows: time, group, location, attendance count
- Click training to open detail page or edit modal

**Click on Training Chip:**
- Opens training detail modal directly

---

## Data Loading

- Fetch trainings for the displayed month (with buffer for partial weeks)
- `date_from` / `date_to` params sent to API to get relevant trainings
- Cache fetched month data to avoid re-fetching on day navigation within same month

---

## Component Structure

```
TrainingsPage/
├── TrainingsContent (main container)
│   ├── Header with toggle buttons
│   ├── FilterBar (existing)
│   ├── ViewContainer
│   │   ├── GridView (existing)
│   │   ├── ListView (existing)
│   │   └── CalendarView (NEW)
│   │       ├── CalendarHeader (month nav)
│   │       ├── CalendarGrid
│   │       └── DayPopover (trainings for selected day)
│   └── Pagination (shown in grid/list, hidden in calendar)
```

---

## Technical Approach

**Dependencies:**
- `react-big-calendar` - Calendar component
- `date-fns` - Date manipulation (already available via project or to be added)

**Styling:**
- Custom CSS matching Shadcn theme colors
- Override default react-big-calendar styles

**State:**
- `viewMode: "grid" | "list" | "calendar"` (extend existing)
- `calendarMonth: Date` - currently displayed month
- `selectedDay: Date | null` - for day popover

**API:**
- Keep existing `/trainings/?date_from=X&date_to=Y` to fetch trainings
- Calculate date range from calendar month view

---

## Interactions

| Action | Result |
|--------|--------|
| Click calendar icon in toggle | Switch to calendar view |
| Click `<` / `>` arrows | Navigate months |
| Click "Today" | Jump to current month |
| Click on day cell | Show popover with day's trainings |
| Click on training chip | Open training detail modal |
| Switch away from calendar | Preserve last viewed month |
| Create/edit training | Refresh calendar data |

---

## Polish

- Smooth transitions when switching views
- Loading skeleton for calendar while fetching
- Empty state for days with no trainings
- Responsive: on mobile, calendar shows in portrait mode with smaller cells