Fix 1st-of-month highlight bug and restore Calendars header

selectedDate now only set by user clicks in mini calendar, not by
external currentDate prop (which is always 1st of displayed month
from FullCalendar's view.currentStart). Restore h-16 "Calendars"
header above mini calendar for consistent top-of-page alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-17 20:03:22 +08:00
parent b939843249
commit 2d76ecf869
2 changed files with 5 additions and 4 deletions

View File

@ -99,6 +99,9 @@ const CalendarSidebar = forwardRef<HTMLDivElement, CalendarSidebarProps>(functio
return ( return (
<div ref={ref} className="shrink-0 border-r bg-card flex flex-col" style={{ width }}> <div ref={ref} className="shrink-0 border-r bg-card flex flex-col" style={{ width }}>
<div className="h-16 px-4 border-b flex items-center shrink-0">
<span className="text-sm font-semibold font-heading text-foreground">Calendars</span>
</div>
{onDateClick && ( {onDateClick && (
<div className="border-b shrink-0"> <div className="border-b shrink-0">
<MiniCalendar <MiniCalendar

View File

@ -42,18 +42,16 @@ const MiniCalendar = memo(function MiniCalendar({
const [displayedMonth, setDisplayedMonth] = useState(() => const [displayedMonth, setDisplayedMonth] = useState(() =>
currentDate ? startOfMonth(parseDate(currentDate)) : startOfMonth(new Date()) currentDate ? startOfMonth(parseDate(currentDate)) : startOfMonth(new Date())
); );
const [selectedDate, setSelectedDate] = useState<string | null>( const [selectedDate, setSelectedDate] = useState<string | null>(null);
currentDate ?? null
);
// Sync displayed month when main calendar navigates across months // Sync displayed month when main calendar navigates across months
// selectedDate is only set by user clicks in the mini calendar, not by external navigation
useEffect(() => { useEffect(() => {
if (!currentDate) return; if (!currentDate) return;
const incoming = startOfMonth(parseDate(currentDate)); const incoming = startOfMonth(parseDate(currentDate));
setDisplayedMonth((prev) => setDisplayedMonth((prev) =>
prev.getTime() === incoming.getTime() ? prev : incoming prev.getTime() === incoming.getTime() ? prev : incoming
); );
setSelectedDate((prev) => prev === currentDate ? prev : currentDate);
}, [currentDate, parseDate]); }, [currentDate, parseDate]);
const days = useMemo( const days = useMemo(