From 085f552c4bc36e204af8511cf9e8d36d4e8d1018 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@buzzbee.dev>
Date: Sat, 1 Aug 2026 12:40:23 +0000
Subject: [PATCH] fix: calendar day view - separate Calendar instances per view
 to avoid react-big-calendar view switching bug

---
 apps/web/src/routes/_app/calendar.tsx | 152 +++++++++++++++++++++-----
 1 file changed, 122 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/routes/_app/calendar.tsx b/apps/web/src/routes/_app/calendar.tsx
index 8fc2f79..ec1cf79 100644
--- a/apps/web/src/routes/_app/calendar.tsx
+++ b/apps/web/src/routes/_app/calendar.tsx
@@ -162,7 +162,7 @@ function EventForm({ event, onClose }: { event?: CalendarEvent; onClose: () => v
 function CalendarPage() {
   const queryClient = useQueryClient();
   const [date, setDate] = useState(new Date());
-  const [view, setView] = useState<string>("day");
+  const [view, setView] = useState<string>("month");
   const [createOpen, setCreateOpen] = useState(false);
   const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
   const [eventDetailOpen, setEventDetailOpen] = useState(false);
@@ -254,35 +254,127 @@ function CalendarPage() {
         </Dialog>
       </div>
 
-      <div key={'cal-wrap-' + view} className="rbc-calendar-container" style={{ minHeight: isMobile ? 400 : 600 }}>
-        <Calendar
-          localizer={localizer}
-          events={calendarEvents}
-          startAccessor="start"
-          endAccessor="end"
-          date={date}
-          view={view}
-          onNavigate={handleNavigate}
-          onSelectEvent={handleSelectEvent}
-          onSelectSlot={handleSelectSlot}
-          selectable
-          popup
-          showMultiDayTimes
-          components={{
-            event: EventComponent,
-            toolbar: (props: any) => (
-              <CustomToolbar
-                {...props}
-                currentView={view}
-                onView={(newView: string) => setView(newView)}
-              />
-            ),
-          }}
-          views={["month", "week", "work_week", "day", "agenda"]}
-          step={30}
-          timeslots={2}
-          style={{ height: isMobile ? 400 : 600 }}
-        />
+      <div className="rbc-calendar-container" style={{ minHeight: isMobile ? 400 : 600 }}>
+        {view === "month" && (
+          <Calendar
+            localizer={localizer}
+            events={calendarEvents}
+            startAccessor="start"
+            endAccessor="end"
+            date={date}
+            view={view}
+            onNavigate={handleNavigate}
+            onSelectEvent={handleSelectEvent}
+            onSelectSlot={handleSelectSlot}
+            selectable
+            popup
+            showMultiDayTimes
+            components={{
+              event: EventComponent,
+              toolbar: (props: any) => (
+                <CustomToolbar
+                  {...props}
+                  currentView={view}
+                  onView={(newView: string) => setView(newView)}
+                />
+              ),
+            }}
+            views={["month", "week", "work_week", "day", "agenda"]}
+            step={30}
+            timeslots={2}
+            style={{ height: isMobile ? 400 : 600 }}
+          />
+        )}
+        {view === "week" && (
+          <Calendar
+            localizer={localizer}
+            events={calendarEvents}
+            startAccessor="start"
+            endAccessor="end"
+            date={date}
+            view={view}
+            onNavigate={handleNavigate}
+            onSelectEvent={handleSelectEvent}
+            onSelectSlot={handleSelectSlot}
+            selectable
+            popup
+            showMultiDayTimes
+            components={{
+              event: EventComponent,
+              toolbar: (props: any) => (
+                <CustomToolbar
+                  {...props}
+                  currentView={view}
+                  onView={(newView: string) => setView(newView)}
+                />
+              ),
+            }}
+            views={["month", "week", "work_week", "day", "agenda"]}
+            step={30}
+            timeslots={2}
+            style={{ height: isMobile ? 400 : 600 }}
+          />
+        )}
+        {view === "day" && (
+          <Calendar
+            localizer={localizer}
+            events={calendarEvents}
+            startAccessor="start"
+            endAccessor="end"
+            date={date}
+            view={view}
+            onNavigate={handleNavigate}
+            onSelectEvent={handleSelectEvent}
+            onSelectSlot={handleSelectSlot}
+            selectable
+            popup
+            showMultiDayTimes
+            components={{
+              event: EventComponent,
+              toolbar: (props: any) => (
+                <CustomToolbar
+                  {...props}
+                  currentView={view}
+                  onView={(newView: string) => setView(newView)}
+                />
+              ),
+            }}
+            views={["month", "week", "work_week", "day", "agenda"]}
+            step={30}
+            timeslots={2}
+            style={{ height: isMobile ? 400 : 600 }}
+          />
+        )}
+        {view === "agenda" && (
+          <Calendar
+            localizer={localizer}
+            events={calendarEvents}
+            startAccessor="start"
+            endAccessor="end"
+            date={date}
+            view={view}
+            onNavigate={handleNavigate}
+            onSelectEvent={handleSelectEvent}
+            onSelectSlot={handleSelectSlot}
+            selectable
+            popup
+            showMultiDayTimes
+            components={{
+              event: EventComponent,
+              toolbar: (props: any) => (
+                <CustomToolbar
+                  {...props}
+                  currentView={view}
+                  onView={(newView: string) => setView(newView)}
+                />
+              ),
+            }}
+            views={["month", "week", "work_week", "day", "agenda"]}
+            step={30}
+            timeslots={2}
+            style={{ height: isMobile ? 400 : 600 }}
+          />
+        )}
       </div>
 
       {/* Event detail dialog */}