Improves event drag and drop highlighting

Enhances the visual feedback during and after event drag and drop operations in the calendar.

- Preserves the full opacity of the dragged event clone during the drag operation for better visibility.
- Applies a highlight class to the event after it's dropped to visually indicate the new location.
- Adds specific styling for the highlighted state based on event type.

src/elements/SwpEventElement.ts

@@ -354,6 +354,9 @@ export class SwpAllDayEventElement extends BaseSwpEventElement {
     // Disable pointer events on clone so it doesn't interfere with hover detection
     clone.style.pointerEvents = 'none';
 
+    // Preserve full opacity during drag
+    clone.style.opacity = '1';
+
     return clone;
   }
 

src/managers/AllDayManager.ts

@@ -490,6 +490,9 @@ export class AllDayManager {
     dragEndEvent.draggedClone.style.cursor = '';
     dragEndEvent.draggedClone.style.opacity = '';
 
+    // 7. Apply highlight class to show the dropped event with highlight color
+    dragEndEvent.draggedClone.classList.add('highlight');
+
     this.fadeOutAndRemove(dragEndEvent.originalElement);
 
     this.checkAndAnimateAllDayHeight();

src/renderers/AllDayEventRenderer.ts

@@ -79,6 +79,9 @@ export class AllDayEventRenderer {
     const dayEvent = SwpAllDayEventElement.fromCalendarEvent(event);
     dayEvent.applyGridPositioning(layout.row, layout.startColumn, layout.endColumn);
 
+    // Apply highlight class to show events with highlight color
+    dayEvent.classList.add('highlight');
+
     container.appendChild(dayEvent);
   }
 

wwwroot/css/calendar-layout-css.css

@@ -361,11 +361,67 @@ swp-allday-container swp-allday-event {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-left: 3px solid rgba(0, 0, 0, 0.2);
 
-  &.dragging {
+  /* Event type colors - normal state */
-    background: lab(70.24% -13.38 -46.17);
+  &[data-type="meeting"] {
+    background: var(--color-event-meeting);
+    color: var(--color-text);
   }
+
+  &[data-type="meal"] {
+    background: var(--color-event-meal);
+    color: var(--color-text);
+  }
+
+  &[data-type="work"] {
+    background: var(--color-event-work);
+    color: var(--color-text);
+  }
+
+  &[data-type="milestone"] {
+    background: var(--color-event-milestone);
+    color: var(--color-text);
+  }
+
+  &[data-type="personal"] {
+    background: var(--color-event-personal);
+    color: var(--color-text);
+  }
+
+  &[data-type="deadline"] {
+    background: var(--color-event-milestone);
+    color: var(--color-text);
+  }
+
+  /* Dragging state - keep full opacity */
+  &.dragging {
+    opacity: 1;
+  }
+}
+
+/* Event type colors - highlight state (after drop) */
+swp-allday-container swp-allday-event.highlight[data-type="meeting"] {
+  background: var(--color-event-meeting-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="meal"] {
+  background: var(--color-event-meal-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="work"] {
+  background: var(--color-event-work-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="milestone"] {
+  background: var(--color-event-milestone-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="personal"] {
+  background: var(--color-event-personal-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="deadline"] {
+  background: var(--color-event-milestone-hl) !important;
 }
 
 /* Overflow indicator styling */