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

Adds scroll synchronization for calendar view

Browse source 
Introduces ScrollManager to synchronize time axis and header scrolling

Improves user experience by keeping time axis and header aligned during scrolling
Enables dynamic vertical and horizontal scroll tracking for calendar components
This commit is contained in:
Janus C. H. Knudsen 2025-12-07 15:08:23 +01:00
parent ed5b2beb4c
commit 70e505526f
4 changed files with 65 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

42
wwwroot/css/calendar-v2.css
View file

@ -2,6 +2,8 @@
--hour-height: 60px;
--time-axis-width: 60px;
--grid-columns: 5;
--day-start-hour: 0;
--day-end-hour: 24;
--color-border: #e0e0e0;
--color-surface: #fff;
--color-text-secondary: #666;
@ -68,6 +70,7 @@ swp-calendar-container {
grid-template-columns: var(--time-axis-width) 1fr;
grid-template-rows: auto 1fr;
overflow: hidden;
height: 100%;
}
/* Time axis */
@ -78,6 +81,7 @@ swp-time-axis {
grid-template-rows: subgrid;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
overflow: hidden;
}
swp-header-spacer {
@ -85,8 +89,8 @@ swp-header-spacer {
}
swp-time-axis-content {
display: flex;
flex-direction: column;
display: grid;
grid-auto-rows: var(--hour-height);
overflow: hidden;
}
@ -108,19 +112,31 @@ swp-grid-container {
}
/* Viewport/Track for slide animation */
swp-header-viewport,
swp-content-viewport {
swp-header-viewport {
overflow: hidden;
}
swp-header-track,
swp-content-track {
swp-content-viewport {
overflow: hidden;
min-height: 0; /* Tillader at krympe i grid */
}
swp-header-track {
display: flex;
}
swp-header-track > swp-calendar-header,
swp-content-track {
display: flex;
height: 100%;
}
swp-header-track > swp-calendar-header {
flex: 0 0 100%;
}
swp-content-track > swp-scrollable-content {
flex: 0 0 100%;
height: 100%;
}
/* Header */
@ -129,6 +145,16 @@ swp-calendar-header {
grid-template-columns: repeat(var(--grid-columns), 1fr);
grid-auto-rows: auto;
background: var(--color-surface);
overflow-y: scroll;
overflow-x: hidden;
}
swp-calendar-header::-webkit-scrollbar {
background: transparent;
}
swp-calendar-header::-webkit-scrollbar-thumb {
background: transparent;
}
swp-calendar-header[data-levels="date"] > swp-day-header { grid-row: 1; }
@ -182,7 +208,7 @@ swp-scrollable-content {
swp-time-grid {
display: block;
position: relative;
min-height: calc(15 * var(--hour-height));
min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
}
swp-grid-lines {