From 049280e6318bfee345d0945afeda74941be3d8e7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 15 May 2025 16:49:32 -0500
Subject: [PATCH] ensure range is timezone aware

---
 web/src/components/filter/CalendarFilterButton.tsx |  3 +++
 web/src/hooks/use-date-utils.ts                    | 13 ++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/web/src/components/filter/CalendarFilterButton.tsx b/web/src/components/filter/CalendarFilterButton.tsx
index 18cadeef0..876eb9ab0 100644
--- a/web/src/components/filter/CalendarFilterButton.tsx
+++ b/web/src/components/filter/CalendarFilterButton.tsx
@@ -32,10 +32,12 @@ export default function CalendarFilterButton({
   updateSelectedDay,
 }: CalendarFilterButtonProps) {
   const { t } = useTranslation(["components/filter", "views/events"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [open, setOpen] = useState(false);
   const selectedDate = useFormattedTimestamp(
     day == undefined ? 0 : day?.getTime() / 1000 + 1,
     t("time.formattedTimestampMonthDay", { ns: "common" }),
+    config?.ui.timezone,
   );
 
   const trigger = (
@@ -109,6 +111,7 @@ export function CalendarRangeFilterButton({
     range?.from == undefined ? 0 : range.from.getTime() / 1000 + 1,
     range?.to == undefined ? 0 : range.to.getTime() / 1000 - 1,
     t("time.formattedTimestampMonthDay", { ns: "common" }),
+    config?.ui.timezone,
   );
 
   const trigger = (
diff --git a/web/src/hooks/use-date-utils.ts b/web/src/hooks/use-date-utils.ts
index 5fa8dd585..dbe3085d4 100644
--- a/web/src/hooks/use-date-utils.ts
+++ b/web/src/hooks/use-date-utils.ts
@@ -21,22 +21,29 @@ export function useFormattedTimestamp(
   return formattedTimestamp;
 }
 
-export function useFormattedRange(start: number, end: number, format: string) {
+export function useFormattedRange(
+  start: number,
+  end: number,
+  format: string,
+  timezone?: string,
+) {
   const locale = useDateLocale();
 
   const formattedStart = useMemo(() => {
     return formatUnixTimestampToDateTime(start, {
+      timezone,
       date_format: format,
       locale,
     });
-  }, [format, start, locale]);
+  }, [format, start, timezone, locale]);
 
   const formattedEnd = useMemo(() => {
     return formatUnixTimestampToDateTime(end, {
+      timezone,
       date_format: format,
       locale,
     });
-  }, [format, end, locale]);
+  }, [format, end, timezone, locale]);
 
   return `${formattedStart} - ${formattedEnd}`;
 }