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

Refactors week header to calendar header

Browse source 
Renames 'week header' to 'calendar header' for better representation
of the component's purpose, which includes more than just week-based
calendar views.

Updates related methods and references in GridManager and
ScrollManager to reflect the change.

Fixes incorrect calculation of the column width.
This commit is contained in:
Janus Knudsen 2025-08-07 00:26:33 +02:00
parent 29811fd4b5
commit 2a766cf685
5 changed files with 62 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/managers/ScrollManager.ts
View file

@ -11,7 +11,7 @@ export class ScrollManager {
private scrollableContent: HTMLElement | null = null;
private calendarContainer: HTMLElement | null = null;
private timeAxis: HTMLElement | null = null;
private weekHeader: HTMLElement | null = null;
private calendarHeader: HTMLElement | null = null;
private resizeObserver: ResizeObserver | null = null;
constructor() {
@ -57,7 +57,7 @@ export class ScrollManager {
}
// Setup horizontal scrolling synchronization
if (this.scrollableContent && this.weekHeader) {
if (this.scrollableContent && this.calendarHeader) {
this.setupHorizontalScrollSynchronization();
}
}
@ -108,13 +108,13 @@ export class ScrollManager {
this.scrollableContent = document.querySelector('swp-scrollable-content');
this.calendarContainer = document.querySelector('swp-calendar-container');
this.timeAxis = document.querySelector('swp-time-axis');
this.weekHeader = document.querySelector('swp-calendar-header');
this.calendarHeader = document.querySelector('swp-calendar-header');
console.log('ScrollManager: Found elements:', {
scrollableContent: !!this.scrollableContent,
calendarContainer: !!this.calendarContainer,
timeAxis: !!this.timeAxis,
weekHeader: !!this.weekHeader
calendarHeader: !!this.calendarHeader
});
}
@ -172,9 +172,9 @@ export class ScrollManager {
const navigation = document.querySelector('swp-calendar-nav');
const navHeight = navigation ? navigation.getBoundingClientRect().height : 0;
// Find week header height
const weekHeader = document.querySelector('swp-calendar-header');
const headerHeight = weekHeader ? weekHeader.getBoundingClientRect().height : 80;
// Find calendar header height
const calendarHeaderElement = document.querySelector('swp-calendar-header');
const headerHeight = calendarHeaderElement ? calendarHeaderElement.getBoundingClientRect().height : 80;
// Calculate available height for scrollable content
const availableHeight = containerRect.height - headerHeight;
@ -241,33 +241,33 @@ export class ScrollManager {
}
/**
* Setup horizontal scroll synchronization between scrollable content and week header
* Setup horizontal scroll synchronization between scrollable content and calendar header
*/
private setupHorizontalScrollSynchronization(): void {
if (!this.scrollableContent || !this.weekHeader) return;
if (!this.scrollableContent || !this.calendarHeader) return;
console.log('ScrollManager: Setting up horizontal scroll synchronization');
// Listen to horizontal scroll events
this.scrollableContent.addEventListener('scroll', () => {
this.syncWeekHeaderPosition();
this.syncCalendarHeaderPosition();
});
}
/**
* Synchronize week header position with scrollable content horizontal scroll
* Synchronize calendar header position with scrollable content horizontal scroll
*/
private syncWeekHeaderPosition(): void {
if (!this.scrollableContent || !this.weekHeader) return;
private syncCalendarHeaderPosition(): void {
if (!this.scrollableContent || !this.calendarHeader) return;
const scrollLeft = this.scrollableContent.scrollLeft;
// Use transform for smooth performance
this.weekHeader.style.transform = `translateX(-${scrollLeft}px)`;
this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
// Debug logging (can be removed later)
if (scrollLeft % 100 === 0) { // Only log every 100px to avoid spam
console.log(`ScrollManager: Synced week-header to scrollLeft: ${scrollLeft}px`);
console.log(`ScrollManager: Synced calendar-header to scrollLeft: ${scrollLeft}px`);
}
}