Improves grid layout and navigation

Refactors the calendar grid to support smoother navigation transitions by using separate week containers.

This change introduces a GridManager to handle grid rendering and interactions within these containers, enabling scroll synchronization and click event handling for each week view.

Also, configures the calendar to start at midnight and span a full 24-hour day, providing a more comprehensive view.

wwwroot/css/calendar-events-css.css

@@ -6,12 +6,11 @@ swp-event {
   border-radius: 4px;
   overflow: hidden;
   cursor: move;
-  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
-  z-index: var(--z-event);
-  
-  /* CSS-based positioning */
-  top: calc(var(--start-minutes) * var(--minute-height));
-  height: calc(var(--duration-minutes) * var(--minute-height));
+  transition: box-shadow 150ms ease, transform 150ms ease;
+  z-index: 10;
+  left: 1px;
+  right: 1px;
+  padding: 8px;
   
   /* Event types */
   &[data-type="meeting"] {
@@ -34,110 +33,26 @@ swp-event {
     border-left: 4px solid var(--color-event-milestone-border);
   }
   
-  /* Hover state */
-  &:hover {
-    box-shadow: var(--shadow-md);
-    transform: scale(1.02);
-    z-index: var(--z-event-hover);
-    
-    swp-resize-handle {
-      opacity: 1;
-    }
-  }
-  
-  /* Active/selected state */
-  &[data-selected="true"] {
-    box-shadow: 0 0 0 2px var(--color-primary);
-    z-index: var(--z-event-hover);
-  }
-  
-  /* Dragging state */
-  &[data-dragging="true"] {
-    opacity: 0.5;
-    cursor: grabbing;
-    z-index: var(--z-drag-ghost);
-    
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -2px;
-      border: 2px solid var(--color-primary);
-      border-radius: 6px;
-      pointer-events: none;
-    }
-  }
-  
-  /* Resizing state */
-  &[data-resizing="true"] {
-    opacity: 0.8;
-    
-    swp-resize-handle {
-      opacity: 1;
-      
-      &::before,
-      &::after {
-        background: var(--color-primary);
-      }
-    }
-  }
-  
-  /* Sync status indicators */
-  &[data-sync-status="pending"] {
-    &::after {
-      content: '';
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      width: 8px;
-      height: 8px;
-      background: var(--color-warning);
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-  }
-  
-  &[data-sync-status="error"] {
-    &::after {
-      content: '';
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      width: 8px;
-      height: 8px;
-      background: var(--color-danger);
-      border-radius: 50%;
-    }
-  }
 }
 
-/* Event header */
-swp-event-header {
-  padding: 8px 12px 4px;
-  
-  swp-event-time {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    opacity: 0.8;
-  }
+swp-event:hover {
+  box-shadow: var(--shadow-md);
+  transform: scale(1.02);
+  z-index: 20;
 }
 
-/* Event body */
-swp-event-body {
-  padding: 0 12px 8px;
-  
-  swp-event-title {
-    display: block;
-    font-size: 0.875rem;
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    
-    /* Multi-line ellipsis */
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
+swp-event-time {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  opacity: 0.8;
+  margin-bottom: 4px;
+}
+
+swp-event-title {
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.3;
 }
 
 /* Resize handles */