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

50
src/managers/GridManager.ts
View file

@ -154,8 +154,8 @@ export class GridManager {
this.createWeekContainer();
} else {
console.log('GridManager: Re-render - updating existing structure');
// Just update the week header for all-day events
this.updateWeekHeader();
// Just update the calendar header for all-day events
this.updateCalendarHeader();
}
console.log('GridManager: Grid rendered successfully with POC structure');
@ -203,10 +203,10 @@ export class GridManager {
const weekContainer = document.createElement('swp-grid-container');
// Create week header using Strategy Pattern
const weekHeader = document.createElement('swp-calendar-header');
this.renderWeekHeaders(weekHeader);
weekContainer.appendChild(weekHeader);
// Create calendar header using Strategy Pattern
const calendarHeader = document.createElement('swp-calendar-header');
this.renderCalendarHeader(calendarHeader);
weekContainer.appendChild(calendarHeader);
// Create scrollable content
const scrollableContent = document.createElement('swp-scrollable-content');
@ -216,10 +216,10 @@ export class GridManager {
const gridLines = document.createElement('swp-grid-lines');
timeGrid.appendChild(gridLines);
// Create day columns using Strategy Pattern
const dayColumns = document.createElement('swp-day-columns');
this.renderDayColumns(dayColumns);
timeGrid.appendChild(dayColumns);
// Create column container using Strategy Pattern
const columnContainer = document.createElement('swp-day-columns');
this.renderColumnContainer(columnContainer);
timeGrid.appendChild(columnContainer);
scrollableContent.appendChild(timeGrid);
weekContainer.appendChild(scrollableContent);
@ -228,9 +228,9 @@ export class GridManager {
}
/**
* Render week headers using Strategy Pattern
* Render calendar header using Strategy Pattern
*/
private renderWeekHeaders(weekHeader: HTMLElement): void {
private renderCalendarHeader(calendarHeader: HTMLElement): void {
if (!this.currentWeek) return;
const calendarType = calendarConfig.getCalendarType();
@ -243,19 +243,19 @@ export class GridManager {
resourceData: this.resourceData
};
headerRenderer.render(weekHeader, context);
headerRenderer.render(calendarHeader, context);
// Update spacer heights based on all-day events
this.updateSpacerHeights();
}
/**
* Render day columns using Strategy Pattern
* Render column container using Strategy Pattern
*/
private renderDayColumns(dayColumns: HTMLElement): void {
private renderColumnContainer(columnContainer: HTMLElement): void {
if (!this.currentWeek) return;
console.log('GridManager: renderDayColumns called');
console.log('GridManager: renderColumnContainer called');
const calendarType = calendarConfig.getCalendarType();
const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
@ -265,23 +265,23 @@ export class GridManager {
resourceData: this.resourceData
};
columnRenderer.render(dayColumns, context);
columnRenderer.render(columnContainer, context);
}
/**
* Update only the week header (for all-day events) without rebuilding entire grid
* Update only the calendar header (for all-day events) without rebuilding entire grid
*/
private updateWeekHeader(): void {
private updateCalendarHeader(): void {
if (!this.grid || !this.currentWeek) return;
const weekHeader = this.grid.querySelector('swp-calendar-header');
if (!weekHeader) return;
const calendarHeader = this.grid.querySelector('swp-calendar-header');
if (!calendarHeader) return;
// Clear existing content
weekHeader.innerHTML = '';
calendarHeader.innerHTML = '';
// Re-render headers using Strategy Pattern
this.renderWeekHeaders(weekHeader as HTMLElement);
this.renderCalendarHeader(calendarHeader as HTMLElement);
}
/**
@ -304,9 +304,9 @@ export class GridManager {
console.log('GridManager: Updated all-day events:', this.allDayEvents.length);
// Update only the week header if grid is already rendered
// Update only the calendar header if grid is already rendered
if (this.grid && this.grid.children.length > 0) {
this.updateWeekHeader();
this.updateCalendarHeader();
}
}

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`);
}
}