diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx index a76b81db6..5cd561a7e 100644 --- a/web/src/components/filter/ReviewFilterGroup.tsx +++ b/web/src/components/filter/ReviewFilterGroup.tsx @@ -521,7 +521,7 @@ function CalendarFilterButton({ return ( {trigger} - {content} + {content} ); } diff --git a/web/src/components/overlay/ReviewActivityCalendar.tsx b/web/src/components/overlay/ReviewActivityCalendar.tsx index 6ac7c6a20..592714942 100644 --- a/web/src/components/overlay/ReviewActivityCalendar.tsx +++ b/web/src/components/overlay/ReviewActivityCalendar.tsx @@ -5,6 +5,9 @@ import { FaCircle } from "react-icons/fa"; import { getUTCOffset } from "@/utils/dateUtil"; import { type DayContentProps } from "react-day-picker"; import { LAST_24_HOURS_KEY } from "@/types/filter"; +import { usePersistence } from "@/hooks/use-persistence"; + +type WeekStartsOnType = 0 | 1 | 2 | 3 | 4 | 5 | 6; type ReviewActivityCalendarProps = { reviewSummary?: ReviewSummary; @@ -16,6 +19,8 @@ export default function ReviewActivityCalendar({ selectedDay, onSelect, }: ReviewActivityCalendarProps) { + const [weekStartsOn] = usePersistence("weekStartsOn", 0); + const disabledDates = useMemo(() => { const tomorrow = new Date(); tomorrow.setHours(tomorrow.getHours() + 24, -1, 0, 0); @@ -72,6 +77,7 @@ export default function ReviewActivityCalendar({ DayContent: ReviewActivityDay, }} defaultMonth={selectedDay ?? new Date()} + weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType} /> ); } @@ -109,6 +115,8 @@ export function TimezoneAwareCalendar({ selectedDay, onSelect, }: TimezoneAwareCalendarProps) { + const [weekStartsOn] = usePersistence("weekStartsOn", 0); + const timezoneOffset = useMemo( () => timezone ? Math.round(getUTCOffset(new Date(), timezone)) : undefined, @@ -162,6 +170,7 @@ export function TimezoneAwareCalendar({ selected={selectedDay} onSelect={onSelect} defaultMonth={selectedDay ?? new Date()} + weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType} /> ); } diff --git a/web/src/views/settings/GeneralSettingsView.tsx b/web/src/views/settings/GeneralSettingsView.tsx index 8e1c9a655..64636bc2a 100644 --- a/web/src/views/settings/GeneralSettingsView.tsx +++ b/web/src/views/settings/GeneralSettingsView.tsx @@ -20,6 +20,7 @@ import { } from "../../components/ui/select"; const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16]; +const WEEK_STARTS_ON = ["Sunday", "Monday"]; export default function GeneralSettingsView() { const { data: config } = useSWR("config"); @@ -53,6 +54,7 @@ export default function GeneralSettingsView() { const [autoLive, setAutoLive] = usePersistence("autoLiveView", true); const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1); + const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0); return ( <> @@ -142,6 +144,41 @@ export default function GeneralSettingsView() { + + + Calendar + + +
+
+
First Weekday
+
+

The day that the weeks of the review calendar begin on.

+
+
+
+ +