From de06a9aa210c2f996e33ea8555ff374355f4d4cc Mon Sep 17 00:00:00 2001
From: Hermes <hermes@buzzbee.dev>
Date: Fri, 31 Jul 2026 01:47:47 +0000
Subject: [PATCH] fix(p2): Calendar view toggle - key prop on
 DragAndDropCalendar forces remount

---
 apps/web/app/(dashboard)/calendar/page.tsx          |  2 +-
 .../components/calendar/big-calendar-wrapper.tsx    | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(dashboard)/calendar/page.tsx b/apps/web/app/(dashboard)/calendar/page.tsx
index d6dc160..62183af 100644
--- a/apps/web/app/(dashboard)/calendar/page.tsx
+++ b/apps/web/app/(dashboard)/calendar/page.tsx
@@ -394,7 +394,7 @@ export default function CalendarPage() {
                 </Button>
               </div>
             ) : (
-              <Suspense key={view}
+              <Suspense
                 fallback={
                   <div className="flex h-[600px] items-center justify-center rounded-lg border bg-muted/30">
                     <div className="animate-pulse text-sm text-muted-foreground">Loading calendar...</div>
diff --git a/apps/web/components/calendar/big-calendar-wrapper.tsx b/apps/web/components/calendar/big-calendar-wrapper.tsx
index cc0bc27..8b9d538 100644
--- a/apps/web/components/calendar/big-calendar-wrapper.tsx
+++ b/apps/web/components/calendar/big-calendar-wrapper.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Calendar, dateFnsLocalizer, Views } from 'react-big-calendar';
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
@@ -76,11 +76,9 @@ export function BigCalendarWrapper({
   onViewChange,
 }: BigCalendarWrapperProps) {
   const router = useRouter();
-  const [currentView, setCurrentView] = useState(defaultView);
 
-  useEffect(() => {
-    setCurrentView(defaultView);
-  }, [defaultView]);
+
+
 
   const handleSelectEvent = useCallback(
     (event: CalendarEvent) => {
@@ -107,7 +105,7 @@ export function BigCalendarWrapper({
 
   const handleViewChange = useCallback(
     (newView: string) => {
-      setCurrentView(newView);
+
       if (onViewChange) onViewChange(newView);
     },
     [onViewChange]
@@ -127,6 +125,7 @@ export function BigCalendarWrapper({
 
   return (
     <DragAndDropCalendar
+      key={defaultView}
       localizer={localizer}
       events={events}
       startAccessor="start"
@@ -135,7 +134,7 @@ export function BigCalendarWrapper({
       eventPropGetter={eventStyleGetter}
       onSelectEvent={handleSelectEvent}
       views={['month', 'week', 'day']}
-      view={currentView}
+      view={defaultView}
       date={date}
       onNavigate={handleNavigate}
       onView={handleViewChange}