BuzzbeeSCD/ProjectE
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: calendar day view - separate Calendar instances per view to avoid react-big-calendar view switching bug

Browse Source
This commit is contained in:
Hermes
2026-08-01 12:40:23 +00:00
parent 6613ff058e
commit 085f552c4b
1 changed files with 122 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/_app/calendar.tsx
+122 -30
View File
@@ -162,7 +162,7 @@ function EventForm({ event, onClose }: { event?: CalendarEvent; onClose: () => v
function CalendarPage() { function CalendarPage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [date, setDate] = useState(new Date()); const [date, setDate] = useState(new Date());
const [view, setView] = useState<string>("day"); const [view, setView] = useState<string>("month");
const [createOpen, setCreateOpen] = useState(false); const [createOpen, setCreateOpen] = useState(false);
const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null); const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
const [eventDetailOpen, setEventDetailOpen] = useState(false); const [eventDetailOpen, setEventDetailOpen] = useState(false);
@@ -254,35 +254,127 @@ function CalendarPage() {
</Dialog> </Dialog>
</div> </div>
<div key={'cal-wrap-' + view} className="rbc-calendar-container" style={{ minHeight: isMobile ? 400 : 600 }}> <div className="rbc-calendar-container" style={{ minHeight: isMobile ? 400 : 600 }}>
<Calendar {view === "month" && (
localizer={localizer} <Calendar
events={calendarEvents} localizer={localizer}
startAccessor="start" events={calendarEvents}
endAccessor="end" startAccessor="start"
date={date} endAccessor="end"
view={view} date={date}
onNavigate={handleNavigate} view={view}
onSelectEvent={handleSelectEvent} onNavigate={handleNavigate}
onSelectSlot={handleSelectSlot} onSelectEvent={handleSelectEvent}
selectable onSelectSlot={handleSelectSlot}
popup selectable
showMultiDayTimes popup
components={{ showMultiDayTimes
event: EventComponent, components={{
toolbar: (props: any) => ( event: EventComponent,
<CustomToolbar toolbar: (props: any) => (
{...props} <CustomToolbar
currentView={view} {...props}
onView={(newView: string) => setView(newView)} currentView={view}
/> onView={(newView: string) => setView(newView)}
), />
}} ),
views={["month", "week", "work_week", "day", "agenda"]} }}
step={30} views={["month", "week", "work_week", "day", "agenda"]}
timeslots={2} step={30}
style={{ height: isMobile ? 400 : 600 }} 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> </div>
{/* Event detail dialog */} {/* Event detail dialog */}