Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves all-day event rendering and placement

Browse source 
Simplifies and improves the all-day event rendering process, ensuring
consistent container creation and proper placement of events.

- Ensures all-day containers are consistently created during header
  rendering, preventing potential issues with event placement.
- Removes the complex and unreliable mouseover detection for all-day
  conversion, simplifying the event dragging logic.
- Eliminates the dynamic all-day row height calculation, relying on
  CSS for layout control.
- Prevents errors when the all-day container is missing.
This commit is contained in:
Janus Knudsen 2025-08-31 23:48:34 +02:00
parent fafad16926
commit ae42de1f3b
4 changed files with 15 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

2
wwwroot/css/calendar-base-css.css
View file

@ -17,7 +17,7 @@
--week-days: 7;
--header-height: 80px;
--all-day-row-height: 0px; /* Default height for all-day events row */
--allday-event-height: 26px; /* Height of single all-day event including gaps */
--all-day-event-height: 26px; /* Height of single all-day event including gaps */
--stack-levels: 1; /* Number of stack levels for all-day events */
/* Time boundaries - Default fallback values */

6
wwwroot/css/calendar-layout-css.css
View file

@ -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) var(--all-day-row-height); /* Row 1: header height, Row 2: all-day events height */
grid-template-rows: var(--header-height) auto; /* Row 1: header height, Row 2: auto for all-day events */
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);
@ -273,14 +273,14 @@ swp-allday-container {
grid-row: 2; /* Second row of calendar header */
display: grid;
grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
grid-template-rows: repeat(1, var(--allday-event-height, 26px)); /* Default to 1 row, dynamically updated by JS */
grid-template-rows: repeat(1, var(--all-day-event-height)); /* Default to 1 row, dynamically updated by JS */
gap: 2px;
padding: 2px;
align-items: center;
overflow: hidden;
/* Initially hidden - no CSS transitions, use Web Animations API */
height: 0;
height: var(--all-day-row-height);
min-height: 0;
opacity: 0;
}