Interactive Calendar Timeline - Scheduling

Interactive interface designs for timeline-based scheduling

Professional, data-dense visualization with AI optimization • Version 1.0

Workflow (4 Views)

1. Unplanned
2. Optimized
3. Recurring
4. Comparison
1

Unplanned Editor

Dragg unplanned visits to caregiver shifts

Unplannede visits row (blue block)
Editable shifts (gray block)
Real-time validation (green ✓ / red ⚠️)
View 1: Unplanned Schedule Editor
2

Optimized Tuning

AI-optimized schedule with trofel time and map view

Full workflow (visits + travel + break)
Nested time windows (semi-transparent)
Map view with routes (togglebar)
View 2: Optimized Fine-Tuning
3

Recurring Pre-Planning

Weekly/monthly patterns with histogram

Week / 14-day / Month toggle
Capacity histogram (red/blue/green)
Ghost overlay for pattern change
View 3: Recurring Pre-Planning
4

Comparison View

Synchronized before/after timelines

Dual timelines (50/50 split)
KPI comparison (travel time, waiting time, etc.)
Change highlights (purple for flyttade)
View 4: Schedule Comparison

Calendar Features in Mockups

Calendar Feature Caire Usage Mockup
Timeline View Horizontal timelines per caregiver All views
Dragg & Drop Drag visits with constraint-validering View 1, 2
Nested Events Time windows as semi-transparent overlay View 2
Trofel Time Yellow segments between visits View 2
Resource Histogram Capacity usage overlay View 2, 3
Recurring Events Weekly/monthly patterns View 3
Split View Synchronized before/after views View 4
Skill Matching Skill validation (✅ / ⚠️) View 1, 2

Design Principles

🎨 Caire Branding

  • • Primary green: #2563EB
  • • Accent green: #00FF7F
  • • Neutrals: #F5F5F5, #E0E0E0
  • • Calendar header: Blue → Purple gradient

📊 Event colors

  • • 🟩 Visit: #22C55E (green)
  • • 🟨 Travel time: #FACC15 (gul)
  • • 🔶 Break: #F97316 (orange)
  • • 🔴 Waiting time: #EF4444 (red)
  • • 🔵 Unplanned: #3B82F6 (blue)

🖋️ Typography

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

🎯 UX Principles

  • • Desktop-optimized (data-dense)
  • • Professional & minimalist
  • • Responsive feedback (hover, drag)
  • • WCAG AA färgkontbreak

Version: 1.0 (Interactive Calendar Timeline Integration)

Last updated: 25 October 2025

Author: Björn Evers & Caire team

Documentation: daily-scheduling.html