From 3ca1418d945957af6b93ccb5d4fc579e51249574 Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Sun, 14 Jun 2026 22:42:28 +0200
Subject: [PATCH] Fix selection in calendar

---
 frontend/src/pages/Calendar.test.tsx | 31 ++++++++++++++++++++++++++++
 frontend/src/pages/Calendar.tsx      |  9 +++++++-
 frontend/src/pages/calendar.css      |  2 ++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Calendar.test.tsx b/frontend/src/pages/Calendar.test.tsx
index c068cd2..e4eebcd 100644
--- a/frontend/src/pages/Calendar.test.tsx
+++ b/frontend/src/pages/Calendar.test.tsx
@@ -10,6 +10,9 @@ vi.mock('@/context', () => ({
 
 vi.mock('@/hooks', () => ({
   usePlannedDays: vi.fn(),
+  useShowWeekNumbers: vi.fn(() => [false]),
+  getLastLeaveType: vi.fn(() => 'vacation'),
+  setLastLeaveType: vi.fn(),
 }))
 
 vi.mock('@/components/layout/Layout', () => ({
@@ -143,4 +146,32 @@ describe('Calendar', () => {
 
     expect(screen.getByTestId('calendar')).toBeInTheDocument()
   })
+
+  it('highlights date range live while dragging, before pointerup', () => {
+    ;(useWorkspace as any).mockReturnValue(mockWorkspace)
+    ;(usePlannedDays as any).mockReturnValue(mockPlannedDays)
+
+    render(<Calendar />)
+
+    const calendarDays = screen.getAllByTestId('calendar-day')
+    const currentMonthDays = calendarDays.filter((el) => !el.classList.contains('calendar-day--disabled'))
+
+    expect(currentMonthDays.length).toBeGreaterThanOrEqual(2)
+
+    const startDay = currentMonthDays[0] as HTMLElement
+    const endDay = currentMonthDays[3] as HTMLElement
+
+    // Fire pointerdown on first day
+    fireEvent.pointerDown(startDay)
+
+    // Fire pointerenter on later day WITHOUT firing pointerup
+    fireEvent.pointerEnter(endDay)
+
+    // The range should now have the --selected class before pointerup fires
+    const selectedDaysInRange = Array.from(calendarDays).filter((el) =>
+      el.classList.contains('calendar-day--selected')
+    )
+
+    expect(selectedDaysInRange.length).toBeGreaterThan(0)
+  })
 })
diff --git a/frontend/src/pages/Calendar.tsx b/frontend/src/pages/Calendar.tsx
index e25c906..36a8efe 100644
--- a/frontend/src/pages/Calendar.tsx
+++ b/frontend/src/pages/Calendar.tsx
@@ -184,6 +184,13 @@ export function Calendar(): ReactNode {
   const defaultLeaveType = getLastLeaveType() ?? 'vacation'
   const firstSelectedDate = Array.from(selectedDates).sort()[0]
 
+  // Dates to highlight in the grid. While dragging, show a live preview of the
+  // range under the cursor; otherwise show the committed selection.
+  const highlightedDates =
+    isDragging && dragAnchor && dragCurrent
+      ? new Set(datesInRange(dragAnchor, dragCurrent))
+      : selectedDates
+
   return (
     <Layout>
       <div data-testid="calendar" className="calendar">
@@ -215,7 +222,7 @@ export function Calendar(): ReactNode {
                 key={weekIdx}
                 weekDates={week}
                 plannedDays={plannedDays ?? []}
-                selectedDates={selectedDates}
+                selectedDates={highlightedDates}
                 parentName={parentName ?? 'Du'}
                 personalDataUuid={personalDataUuid ?? ''}
                 isCurrentMonth={weekMonth === month}
diff --git a/frontend/src/pages/calendar.css b/frontend/src/pages/calendar.css
index 2ea9b3f..6b146a8 100644
--- a/frontend/src/pages/calendar.css
+++ b/frontend/src/pages/calendar.css
@@ -62,6 +62,8 @@
   flex-direction: column;
   transition: all 0.2s;
   position: relative;
+  user-select: none;
+  -webkit-user-select: none; /* Safari */
 }
 
 .calendar-day:hover {