fix(p2): Calendar view toggle - key prop on DragAndDropCalendar forces remount

This commit is contained in:
Hermes
2026-07-31 01:47:47 +00:00
parent 4bf1c8bf4f
commit de06a9aa21
2 changed files with 7 additions and 8 deletions
+1 -1
View File
@@ -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>
@@ -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}