From bf74e746965fca107c97efdf2ae324191de37e46 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 22 Dec 2025 13:41:28 -0600
Subject: [PATCH] fix weekday starting point on explore when set to monday in
 UI settings

---
 web/src/components/filter/CalendarFilterButton.tsx |  3 +++
 web/src/components/ui/calendar-range.tsx           | 11 ++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/components/filter/CalendarFilterButton.tsx b/web/src/components/filter/CalendarFilterButton.tsx
index 876eb9ab0..9f052b73d 100644
--- a/web/src/components/filter/CalendarFilterButton.tsx
+++ b/web/src/components/filter/CalendarFilterButton.tsx
@@ -18,6 +18,7 @@ import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 
 type CalendarFilterButtonProps = {
   reviewSummary?: ReviewSummary;
@@ -105,6 +106,7 @@ export function CalendarRangeFilterButton({
   const { t } = useTranslation(["components/filter"]);
   const { data: config } = useSWR<FrigateConfig>("config");
   const timezone = useTimezone(config);
+  const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
   const [open, setOpen] = useState(false);
 
   const selectedDate = useFormattedRange(
@@ -138,6 +140,7 @@ export function CalendarRangeFilterButton({
         initialDateTo={range?.to}
         timezone={timezone}
         showCompare={false}
+        weekStartsOn={weekStartsOn}
         onUpdate={(range) => {
           updateSelectedRange(range.range);
           setOpen(false);
diff --git a/web/src/components/ui/calendar-range.tsx b/web/src/components/ui/calendar-range.tsx
index f439cb082..09641926a 100644
--- a/web/src/components/ui/calendar-range.tsx
+++ b/web/src/components/ui/calendar-range.tsx
@@ -35,6 +35,8 @@ export interface DateRangePickerProps {
   showCompare?: boolean;
   /** timezone */
   timezone?: string;
+  /** First day of the week: 0 = Sunday, 1 = Monday */
+  weekStartsOn?: number;
 }
 
 const getDateAdjustedForTimezone = (
@@ -91,6 +93,7 @@ export function DateRangePicker({
   onUpdate,
   onReset,
   showCompare = true,
+  weekStartsOn = 0,
 }: DateRangePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -150,7 +153,9 @@ export function DateRangePicker({
     if (!preset) throw new Error(`Unknown date range preset: ${presetName}`);
     const from = new TZDate(new Date(), timezone);
     const to = new TZDate(new Date(), timezone);
-    const first = from.getDate() - from.getDay();
+    const dayOfWeek = from.getDay();
+    const daysFromWeekStart = (dayOfWeek - weekStartsOn + 7) % 7;
+    const first = from.getDate() - daysFromWeekStart;
 
     switch (preset.name) {
       case "today":
@@ -184,8 +189,8 @@ export function DateRangePicker({
         to.setHours(23, 59, 59, 999);
         break;
       case "lastWeek":
-        from.setDate(from.getDate() - 7 - from.getDay());
-        to.setDate(to.getDate() - to.getDay() - 1);
+        from.setDate(first - 7);
+        to.setDate(first - 1);
         from.setHours(0, 0, 0, 0);
         to.setHours(23, 59, 59, 999);
         break;