fix: calendar day view - explicit onView override in toolbar
This commit is contained in:
@@ -162,6 +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>("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);
|
||||||
@@ -176,7 +177,6 @@ function CalendarPage() {
|
|||||||
return () => window.removeEventListener("resize", check);
|
return () => window.removeEventListener("resize", check);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Mobile: defaultView is set to agenda via isMobile check
|
|
||||||
|
|
||||||
const { data: eventsData } = useApiQuery<{ items: CalendarEvent[]; totalItems: number }>(
|
const { data: eventsData } = useApiQuery<{ items: CalendarEvent[]; totalItems: number }>(
|
||||||
["calendar-events", date.toISOString()],
|
["calendar-events", date.toISOString()],
|
||||||
@@ -235,9 +235,8 @@ function CalendarPage() {
|
|||||||
setDate(newDate);
|
setDate(newDate);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const viewRef = useRef<string>("month");
|
|
||||||
const handleViewChange = useCallback((newView: string) => {
|
const handleViewChange = useCallback((newView: string) => {
|
||||||
viewRef.current = newView;
|
setView(newView);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -262,6 +261,7 @@ function CalendarPage() {
|
|||||||
startAccessor="start"
|
startAccessor="start"
|
||||||
endAccessor="end"
|
endAccessor="end"
|
||||||
date={date}
|
date={date}
|
||||||
|
view={view}
|
||||||
defaultView={isMobile ? Views.AGENDA : Views.MONTH}
|
defaultView={isMobile ? Views.AGENDA : Views.MONTH}
|
||||||
onNavigate={handleNavigate}
|
onNavigate={handleNavigate}
|
||||||
onView={handleViewChange}
|
onView={handleViewChange}
|
||||||
@@ -275,7 +275,16 @@ function CalendarPage() {
|
|||||||
showMultiDayTimes
|
showMultiDayTimes
|
||||||
components={{
|
components={{
|
||||||
event: EventComponent,
|
event: EventComponent,
|
||||||
toolbar: (props: any) => <CustomToolbar {...props} />,
|
toolbar: (props: any) => (
|
||||||
|
<CustomToolbar
|
||||||
|
{...props}
|
||||||
|
currentView={view}
|
||||||
|
onView={(newView: string) => {
|
||||||
|
props.onView(newView);
|
||||||
|
setView(newView);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
}}
|
}}
|
||||||
views={["month", "week", "work_week", "day", "agenda"]}
|
views={["month", "week", "work_week", "day", "agenda"]}
|
||||||
step={30}
|
step={30}
|
||||||
|
|||||||
Reference in New Issue
Block a user