Andrej Spielmann
3fefc550fe
- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
123 lines
3.4 KiB
Markdown
123 lines
3.4 KiB
Markdown
# 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 |