From 0e35d473eb9fb26a921d77c1e9513fc0b1769f37 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Fri, 13 Mar 2026 02:24:20 +0800
Subject: [PATCH] Refine calendar events: dot-only month timed, title-first
 week, no left border

- Month timed events: dot + title only, hover reveals translucent card
- Month all-day events: keep translucent fill
- Time right-aligned in month view (ml-auto)
- Week/day view: title on top, time underneath for better scanning
- Remove 2px left accent border from all events
- Set color:'transparent' on FC event data to prevent inline style conflicts
- Recurring repeat icon preserved in all views

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/calendar/CalendarPage.tsx  | 29 ++++++++--------
 frontend/src/index.css                        | 34 +++++++++++++++----
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index 40ef617..b2a440c 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -364,6 +364,7 @@ export default function CalendarPage() {
     start: event.start_datetime,
     end: event.end_datetime || undefined,
     allDay: event.all_day,
+    color: 'transparent',
     editable: permissionMap.get(event.calendar_id) !== 'read_only',
     extendedProps: {
       is_virtual: event.is_virtual,
@@ -518,36 +519,36 @@ export default function CalendarPage() {
       <Repeat className="h-2.5 w-2.5 shrink-0 opacity-50" />
     ) : null;
 
-    if (isAllDay) {
-      return (
-        <div className="flex items-center gap-1 truncate">
-          <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
-          {repeatIcon}
-        </div>
-      );
-    }
-
     if (isMonth) {
+      if (isAllDay) {
+        return (
+          <div className="flex items-center gap-1 truncate px-1">
+            <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
+            {repeatIcon}
+          </div>
+        );
+      }
+      // Timed events in month: dot + title + time right-aligned
       return (
-        <div className="flex items-center gap-1 truncate">
-          <span className="umbra-event-time text-[11px] opacity-60 shrink-0">{arg.timeText}</span>
+        <div className="flex items-center gap-1.5 truncate w-full">
           <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
           {repeatIcon}
+          <span className="umbra-event-time text-[10px] opacity-50 shrink-0 ml-auto tabular-nums">{arg.timeText}</span>
         </div>
       );
     }
 
-    // Week/day view
+    // Week/day view — title on top, time underneath
     return (
       <div className="flex flex-col overflow-hidden h-full">
-        <span className="text-[10px] opacity-60 leading-tight">{arg.timeText}</span>
         <div className="flex items-center gap-1">
           <span className="text-[12px] font-medium truncate">{arg.event.title}</span>
           {repeatIcon}
         </div>
+        <span className="text-[10px] opacity-50 leading-tight tabular-nums">{arg.timeText}</span>
       </div>
     );
-  }, []);
+  }, [])
 
 
   return (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f338b14..4b60647 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -199,9 +199,7 @@
 
 /* ── Translucent event styling ── */
 .fc .umbra-event {
-  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
   border: none !important;
-  border-left: 2px solid var(--event-color) !important;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
@@ -211,25 +209,47 @@
   color: var(--event-color) !important;
 }
 
-/* Hover state */
-.fc .umbra-event:hover {
+/* ── Month view: all-day events get translucent fill ── */
+.fc .fc-daygrid-block-event.umbra-event {
+  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
+}
+
+.fc .fc-daygrid-block-event.umbra-event:hover {
   background: color-mix(in srgb, var(--event-color) 22%, transparent) !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
-/* Day grid (month view) */
+/* ── Month view: timed events — dot only, card on hover ── */
+.fc .fc-daygrid-dot-event.umbra-event {
+  background: transparent !important;
+}
+
+.fc .fc-daygrid-dot-event.umbra-event .fc-daygrid-event-dot {
+  border-color: var(--event-color) !important;
+}
+
+.fc .fc-daygrid-dot-event.umbra-event:hover {
+  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
+}
+
 .fc .fc-daygrid-event.umbra-event {
   font-size: 0.75rem;
-  padding: 1px 6px;
+  padding: 1px 4px;
   line-height: 1.4;
 }
 
-/* Time grid (week/day view) */
+/* ── Time grid (week/day view) — translucent fill ── */
 .fc .fc-timegrid-event.umbra-event {
+  background: color-mix(in srgb, var(--event-color) 12%, transparent) !important;
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
+.fc .fc-timegrid-event.umbra-event:hover {
+  background: color-mix(in srgb, var(--event-color) 22%, transparent) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
 .fc .fc-timegrid-event.umbra-event .fc-event-main {
   padding: 3px 6px;
 }