Files

T

Andrej Spielmann 3fefc550fe Initial commit: WrestleDesk full project

- 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

2026-03-26 13:24:57 +01:00

3.4 KiB

Raw Blame History

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

3.4 KiB Raw Blame History