From 5bf8dd8cef52edebc6c47e41a1a867a92ebd0b1b Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 31 May 2026 21:32:08 +0200
Subject: [PATCH] Start the Journey date picker week on Monday (#1078)

The Journey entry date picker started the week on Sunday (firstDow = getDay(), headers Su-first) while every other picker (CustomDateTimePicker, VacayCalendar) starts on Monday. Align it: Monday-first leading offset ((getDay()+6)%7) and Mo-first weekday headers.
---
 .../src/components/Journey/JourneyDetailPageDatePicker.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Journey/JourneyDetailPageDatePicker.tsx b/client/src/components/Journey/JourneyDetailPageDatePicker.tsx
index 8da27b91..4b35ef0b 100644
--- a/client/src/components/Journey/JourneyDetailPageDatePicker.tsx
+++ b/client/src/components/Journey/JourneyDetailPageDatePicker.tsx
@@ -15,7 +15,8 @@ export function DatePicker({ value, onChange, tripDates }: {
   })
 
   const daysInMonth = new Date(viewMonth.year, viewMonth.month + 1, 0).getDate()
-  const firstDow = new Date(viewMonth.year, viewMonth.month, 1).getDay()
+  // Monday-first, matching CustomDateTimePicker / VacayCalendar (getDay() is Sunday=0).
+  const firstDow = (new Date(viewMonth.year, viewMonth.month, 1).getDay() + 6) % 7
   const monthName = new Date(viewMonth.year, viewMonth.month).toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
 
   const prevMonth = () => {
@@ -68,7 +69,7 @@ export function DatePicker({ value, onChange, tripDates }: {
 
             {/* Weekday headers */}
             <div className="grid grid-cols-7 mb-1">
-              {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d, i) => (
+              {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((d, i) => (
                 <div key={i} className="text-center text-[10px] font-medium text-zinc-400 py-1">{d}</div>
               ))}
             </div>