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

23
src/v2/core/ScrollManager.ts Normal file
View file

@ -0,0 +1,23 @@
export class ScrollManager {
private scrollableContent!: HTMLElement;
private timeAxisContent!: HTMLElement;
private calendarHeader!: HTMLElement;
init(container: HTMLElement): void {
this.scrollableContent = container.querySelector('swp-scrollable-content')!;
this.timeAxisContent = container.querySelector('swp-time-axis-content')!;
this.calendarHeader = container.querySelector('swp-calendar-header')!;
this.scrollableContent.addEventListener('scroll', () => this.onScroll());
}
private onScroll(): void {
const { scrollTop, scrollLeft } = this.scrollableContent;
// Synkroniser time-axis vertikalt
this.timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;
// Synkroniser header horisontalt
this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
}
}