From bafe539ac4fd61882b89b8477292981188568532 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 15 May 2025 15:36:26 -0500
Subject: [PATCH] Ensure review activity calendar uses correct timezone

react-day-picker 9.x adds a timeZone prop and a TZDate() handler to show the calendar based on a timezone and better handle dates passed to it in timezones
---
 .../components/overlay/ReviewActivityCalendar.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/components/overlay/ReviewActivityCalendar.tsx b/web/src/components/overlay/ReviewActivityCalendar.tsx
index 9988d0904..a0ffd0528 100644
--- a/web/src/components/overlay/ReviewActivityCalendar.tsx
+++ b/web/src/components/overlay/ReviewActivityCalendar.tsx
@@ -3,10 +3,13 @@ import { Calendar } from "../ui/calendar";
 import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
 import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
-import { type DayButtonProps } from "react-day-picker";
+import { type DayButtonProps, TZDate } from "react-day-picker";
 import { LAST_24_HOURS_KEY } from "@/types/filter";
 import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
+import { useTimezone } from "@/hooks/use-date-utils";
 
 type WeekStartsOnType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -22,6 +25,8 @@ export default function ReviewActivityCalendar({
   selectedDay,
   onSelect,
 }: ReviewActivityCalendarProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timezone = useTimezone(config);
   const [weekStartsOn] = usePersistence("weekStartsOn", 0);
 
   const disabledDates = useMemo(() => {
@@ -45,7 +50,7 @@ export default function ReviewActivityCalendar({
         }
 
         const parts = date.split("-");
-        const cal = new Date(date);
+        const cal = new TZDate(date, timezone);
 
         cal.setFullYear(
           parseInt(parts[0]),
@@ -65,7 +70,7 @@ export default function ReviewActivityCalendar({
         }
 
         const parts = date.split("-");
-        const cal = new Date(date);
+        const cal = new TZDate(date, timezone);
 
         cal.setFullYear(
           parseInt(parts[0]),
@@ -82,7 +87,7 @@ export default function ReviewActivityCalendar({
     }
 
     return { alerts, detections, recordings };
-  }, [reviewSummary, recordingsSummary]);
+  }, [reviewSummary, recordingsSummary, timezone]);
 
   return (
     <Calendar
@@ -98,6 +103,7 @@ export default function ReviewActivityCalendar({
       }}
       defaultMonth={selectedDay ?? new Date()}
       weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
+      timeZone={timezone}
     />
   );
 }