Interactive Calendar Timeline - Schemaläggning

Interaktiva gränssnittsdesigner för tidslinjebaserad schemaläggning

Professionell, datatät visualisering med AI-optimering • Version 1.0

Arbetsflöde (4 Vyer)

1. Oplanerad
2. Optimerad
3. Återkommande
4. Jämförelse
1

Oplanerad Editor

Dra oplanerade besök till vårdgivares arbetspass

Oplanerade besök-rad (blå block)
Redigerbara arbetspass (grå block)
Realtidsvalidering (grön ✓ / röd ⚠️)
Vy 1: Unplanned Schedule Editor
2

Optimerad Finjustering

AI-optimerat schema med restid och kartvy

Fullt arbetsflöde (besök + resa + rast)
Nested tidsfönster (semi-transparent)
Kartvy med rutter (togglebar)
Vy 2: Optimized Fine-Tuning
3

Återkommande Förplanering

Vecko-/månadssmönster med histogram

Vecka / 14-dagar / Månad toggle
Kapacitetshistogram (röd/blå/grön)
Ghost-overlay för mönsterändring
Vy 3: Recurring Pre-Planning
4

Jämförelsevy

Synkroniserade före/efter-tidslinjer

Dual tidslinjer (50/50 split)
KPI-jämförelse (restid, väntetid, etc.)
Change highlights (lila för flyttade)
Vy 4: Schedule Comparison

Calendar Features i Mockups

Calendar Feature Caire Användning Mockup
Timeline View Horisontella tidslinjer per vårdgivare Alla vyer
Drag & Drop Dra besök med constraint-validering Vy 1, 2
Nested Events Tidsfönster som semi-transparent overlay Vy 2
Travel Time Gula segment mellan besök Vy 2
Resource Histogram Kapacitetsanvändning overlay Vy 2, 3
Recurring Events Vecko-/månadssmönster Vy 3
Split View Synkroniserade före/efter-vyer Vy 4
Skill Matching Kompetensvalidering (✅ / ⚠️) Vy 1, 2

Designprinciper

🎨 Caire Branding

  • • Primär grön: #2563EB
  • • Accent grön: #00FF7F
  • • Neutrala: #F5F5F5, #E0E0E0
  • • Calendar header: Blå → Lila gradient

📊 Event-färger

  • • 🟩 Besök: #22C55E (grön)
  • • 🟨 Restid: #FACC15 (gul)
  • • 🔶 Raster: #F97316 (orange)
  • • 🔴 Väntetid: #EF4444 (röd)
  • • 🔵 Oplanerat: #3B82F6 (blå)

🖋️ Typografi

  • • Headings: Inter/Lato, 600 weight
  • • Body: System sans-serif, 400
  • • Monospace: Courier New (tider)
  • • Storlekar: 11px-24px

🎯 UX-Principer

  • • Desktop-optimerad (datatät)
  • • Professionell & minimalistisk
  • • Responsiv feedback (hover, drag)
  • • WCAG AA färgkontrast

Version: 1.0 (Interactive Calendar Timeline Integration)

Senast uppdaterad: 25 Oktober 2025

Författare: Björn Evers & Caire-teamet

Dokumentation: daily-scheduling.html