Adding support for start of week day in "Week view".

src/components/calendar-layout.tsx

@@ -34,6 +34,7 @@ export function Eventar({
   showClock = false,
   resources = [],
   specialDays = [],
+  startOfWeek = "Sun"
 }: EventarProps) {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(
@@ -155,6 +156,7 @@ export function Eventar({
                 setIsEventModalOpen,
                 agendaView,
                 specialDays,
+                startOfWeek
               })}
             </ErrorBoundary>
           </motion.main>

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":

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), []);
 

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 {

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 {

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 <WeekViewSkeleton />;