rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fixed day view visual bug

Browse Source
This commit is contained in:
Kyle 2026-02-19 20:38:11 +08:00
parent a352a50b63
commit d5080f59af
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'; import { useState, useRef } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner'; import { toast } from 'sonner';
import FullCalendar from '@fullcalendar/react'; import FullCalendar from '@fullcalendar/react';
@ -12,6 +12,7 @@ import EventForm from './EventForm';
export default function CalendarPage() { export default function CalendarPage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const calendarRef = useRef<FullCalendar>(null);
const [showForm, setShowForm] = useState(false); const [showForm, setShowForm] = useState(false);
const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null); const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);
const [selectedStart, setSelectedStart] = useState<string | null>(null); const [selectedStart, setSelectedStart] = useState<string | null>(null);
@ -130,6 +131,9 @@ export default function CalendarPage() {
}; };
const handleDateSelect = (selectInfo: DateSelectArg) => { const handleDateSelect = (selectInfo: DateSelectArg) => {
// Clear the selection mirror immediately so it doesn't vanish
// jarringly when the user clicks into the form's title field
calendarRef.current?.getApi().unselect();
setSelectedStart(selectInfo.startStr); setSelectedStart(selectInfo.startStr);
setSelectedEnd(selectInfo.endStr); setSelectedEnd(selectInfo.endStr);
setSelectedAllDay(selectInfo.allDay); setSelectedAllDay(selectInfo.allDay);
@ -153,6 +157,7 @@ export default function CalendarPage() {
<div className="flex-1 overflow-y-auto p-6"> <div className="flex-1 overflow-y-auto p-6">
<div className="bg-card rounded-lg border p-4"> <div className="bg-card rounded-lg border p-4">
<FullCalendar <FullCalendar
ref={calendarRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView="dayGridMonth" initialView="dayGridMonth"
headerToolbar={{ headerToolbar={{