administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-04 04:27:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Ensure review activity calendar uses correct timezone

Browse Source 
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
This commit is contained in:
Josh Hawkins 2025-05-15 15:36:26 -05:00
parent 3538a1df3d
commit bafe539ac4
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/overlay/ReviewActivityCalendar.tsx
View File

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