A working test of an all-day-event

src/renderers/HeaderRenderer.ts

@@ -65,6 +65,19 @@ export class DateHeaderRenderer implements HeaderRenderer {
     const weekDays = config.getDateViewSettings().weekDays;
     const daysToShow = dates.slice(0, weekDays);
 
+    // TEST: Add a simple test event for Monday (column 1)
+    const testEvent = document.createElement('swp-allday-event');
+    testEvent.textContent = 'TEST ALL-DAY EVENT';
+    testEvent.style.gridColumn = '1';
+    testEvent.style.gridRow = '2';
+    testEvent.style.backgroundColor = 'orange';
+    testEvent.style.color = 'white';
+    testEvent.style.padding = '4px';
+    testEvent.style.fontSize = '12px';
+    testEvent.style.fontWeight = 'bold';
+    calendarHeader.appendChild(testEvent);
+    console.log('🧪 Added test all-day event to row 2, column 1');
+
     // Process each all-day event to calculate its span
     allDayEvents.forEach(event => {
       const startDate = new Date(event.start);

wwwroot/css/calendar-base-css.css

@@ -16,7 +16,7 @@
   --day-column-min-width: 250px;
   --week-days: 7;
   --header-height: 80px;
-  --all-day-row-height: 0px; /* Default height for all-day events row */
+  --all-day-row-height: 40px; /* Default height for all-day events row */
   
   /* Time boundaries - Default fallback values */
   --day-start-hour: 0;

wwwroot/css/calendar-layout-css.css

@@ -143,7 +143,7 @@ swp-time-grid::after {
 swp-calendar-header {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
-  grid-template-rows: var(--header-height) auto; /* Row 1: use CSS variable, Row 2: auto-sized for all-day events */
+  grid-template-rows: var(--header-height) var(--all-day-row-height); /* Row 1: header height, Row 2: all-day events height */
   min-width: calc(var(--grid-columns, 7) * var(--day-column-min-width)); /* Dynamic width */
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
@@ -180,6 +180,7 @@ swp-calendar-header::-webkit-scrollbar-track {
 
 
 swp-day-header {
+  grid-row: 1; /* Explicitly place day headers in row 1 */
   pointer-events: auto; /* Ensure header clicks work despite parent scrollbar */
   text-align: center;
   border-right: 1px solid var(--color-grid-line);