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

Fix calendar event color not updating after display calendar change

Browse Source 
eventDidMount only fires once when FullCalendar first mounts a DOM element.
When event data refetches with a new calendarColor, the existing DOM element
is reused and --event-color CSS variable stays stale.

Fix: renderEventContent now uses a ref callback (syncColor) to walk up to
the parent .umbra-event element and update --event-color on every render,
ensuring background, hover, and dot colors reflect the current calendar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-16 20:13:34 +08:00
parent aa1ff50788
commit 25830bb99e
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -531,6 +531,16 @@ export default function CalendarPage() {
const isAllDay = arg.event.allDay; const isAllDay = arg.event.allDay;
const isRecurring = arg.event.extendedProps.is_recurring || arg.event.extendedProps.parent_event_id; const isRecurring = arg.event.extendedProps.is_recurring || arg.event.extendedProps.parent_event_id;
const isInvited = arg.event.extendedProps.is_invited; const isInvited = arg.event.extendedProps.is_invited;
const calColor = arg.event.extendedProps.calendarColor as string;
// Sync --event-color on the parent FC element so CSS rules (background, hover)
// pick up color changes without requiring a full remount (eventDidMount only fires once).
const syncColor = (el: HTMLElement | null) => {
if (el && calColor) {
const fcEl = el.closest('.umbra-event');
if (fcEl) (fcEl as HTMLElement).style.setProperty('--event-color', calColor);
}
};
const icons = ( const icons = (
<> <>
@ -542,7 +552,7 @@ export default function CalendarPage() {
if (isMonth) { if (isMonth) {
if (isAllDay) { if (isAllDay) {
return ( return (
<div className="flex items-center gap-1 truncate px-1"> <div ref={syncColor} className="flex items-center gap-1 truncate px-1">
<span className="text-[11px] font-medium truncate">{arg.event.title}</span> <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
{icons} {icons}
</div> </div>
@ -550,10 +560,10 @@ export default function CalendarPage() {
} }
// Timed events in month: dot + title + time right-aligned // Timed events in month: dot + title + time right-aligned
return ( return (
<div className="flex items-center gap-1.5 truncate w-full"> <div ref={syncColor} className="flex items-center gap-1.5 truncate w-full">
<span <span
className="fc-daygrid-event-dot" className="fc-daygrid-event-dot"
style={{ borderColor: 'var(--event-color)' }} style={{ borderColor: calColor || 'var(--event-color)' }}
/> />
<span className="text-[11px] font-medium truncate">{arg.event.title}</span> <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
{icons} {icons}
@ -564,7 +574,7 @@ export default function CalendarPage() {
// Week/day view — title on top, time underneath // Week/day view — title on top, time underneath
return ( return (
<div className="flex flex-col overflow-hidden h-full"> <div ref={syncColor} className="flex flex-col overflow-hidden h-full">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="text-[12px] font-medium truncate">{arg.event.title}</span> <span className="text-[12px] font-medium truncate">{arg.event.title}</span>
{icons} {icons}