diff --git a/src/components/calendar-layout.tsx b/src/components/calendar-layout.tsx index aa06e16..52074ef 100644 --- a/src/components/calendar-layout.tsx +++ b/src/components/calendar-layout.tsx @@ -34,6 +34,7 @@ export function Eventar({ showClock = false, resources = [], specialDays = [], + startOfWeek = "Sun" }: EventarProps) { const [selectedDate, setSelectedDate] = useState(null); const [selectedEvent, setSelectedEvent] = useState( @@ -155,6 +156,7 @@ export function Eventar({ setIsEventModalOpen, agendaView, specialDays, + startOfWeek })} diff --git a/src/components/render-view.tsx b/src/components/render-view.tsx index 437a0b2..113d5b8 100644 --- a/src/components/render-view.tsx +++ b/src/components/render-view.tsx @@ -22,6 +22,7 @@ export const renderView = ({ setIsEventModalOpen, agendaView, specialDays, + startOfWeek }: RenderViewProps) => { if (error) { return ( @@ -95,6 +96,7 @@ export const renderView = ({ showPastDates={showPastDates} handleEventClick={handleEventClick} specialDays={specialDays} + startOfWeek={startOfWeek} /> ); case "day": diff --git a/src/hooks/use-week-view-calculations.ts b/src/hooks/use-week-view-calculations.ts index 3af99e6..ba9de75 100644 --- a/src/hooks/use-week-view-calculations.ts +++ b/src/hooks/use-week-view-calculations.ts @@ -5,18 +5,25 @@ import type { CalendarEvent } from "@/types/calendar"; export function useWeekViewCalculations( date: Date, events: CalendarEvent[], - showPastDates: boolean + showPastDates: boolean, + startOfWeek: "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun" ) { const weekDays = useMemo(() => { - const startOfWeek = new Date(date); - startOfWeek.setDate(date.getDate() - date.getDay()); + const weekDaysMap = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]; + const startIdx = startOfWeek + ? weekDaysMap.indexOf(startOfWeek.trim().toLowerCase()) + : 1; + const todayIdx = date.getDay(); + const diff = (todayIdx - startIdx + 7) % 7; + const startOfWeekDate = new Date(date); + startOfWeekDate.setDate(date.getDate() - diff); return Array.from({ length: 7 }, (_, i) => { - const day = new Date(startOfWeek); - day.setDate(startOfWeek.getDate() + i); + const day = new Date(startOfWeekDate); + day.setDate(startOfWeekDate.getDate() + i); return day; }); - }, [date]); + }, [date, startOfWeek]); const hours = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []); diff --git a/src/types/calendar.ts b/src/types/calendar.ts index abe42af..7039948 100644 --- a/src/types/calendar.ts +++ b/src/types/calendar.ts @@ -78,6 +78,7 @@ export interface EventarProps { showClock?: boolean; resources?: Resource[]; specialDays?: SpecialDay[]; + startOfWeek?: "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun"; } export interface RenderViewProps { @@ -95,6 +96,7 @@ export interface RenderViewProps { setIsEventModalOpen: (isOpen: boolean) => void; agendaView: boolean; specialDays: SpecialDay[]; + startOfWeek?: "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun"; } export interface CalendarHeaderProps { diff --git a/src/types/week.ts b/src/types/week.ts index 3db8d1b..273c5b9 100644 --- a/src/types/week.ts +++ b/src/types/week.ts @@ -7,6 +7,7 @@ export interface WeekViewProps { handleEventClick?: (e: React.MouseEvent, event: CalendarEvent) => void; isLoading?: boolean; specialDays?: SpecialDay[]; + startOfWeek?: "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun"; } export interface WeekHeaderProps { diff --git a/src/views/week-view/week-view.tsx b/src/views/week-view/week-view.tsx index 8e0c251..0c04fd7 100644 --- a/src/views/week-view/week-view.tsx +++ b/src/views/week-view/week-view.tsx @@ -16,9 +16,10 @@ export function WeekView({ handleEventClick, isLoading, specialDays, + startOfWeek }: WeekViewProps) { const { weekDays, hours, fullDayEvents, isPastDate } = - useWeekViewCalculations(date, events, showPastDates); + useWeekViewCalculations(date, events, showPastDates, startOfWeek); if (isLoading) { return ;