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

10
src/renderers/ColumnRenderer.ts
View file

@ -7,7 +7,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes';
* Interface for column rendering strategies
*/
export interface ColumnRenderer {
render(dayColumns: HTMLElement, context: ColumnRenderContext): void;
render(columnContainer: HTMLElement, context: ColumnRenderContext): void;
}
/**
@ -23,7 +23,7 @@ export interface ColumnRenderContext {
* Date-based column renderer (original functionality)
*/
export class DateColumnRenderer implements ColumnRenderer {
render(dayColumns: HTMLElement, context: ColumnRenderContext): void {
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
const { currentWeek, config } = context;
const dates = this.getWeekDates(currentWeek);
@ -39,7 +39,7 @@ export class DateColumnRenderer implements ColumnRenderer {
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
dayColumns.appendChild(column);
columnContainer.appendChild(column);
});
}
@ -62,7 +62,7 @@ export class DateColumnRenderer implements ColumnRenderer {
* Resource-based column renderer
*/
export class ResourceColumnRenderer implements ColumnRenderer {
render(dayColumns: HTMLElement, context: ColumnRenderContext): void {
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
const { resourceData } = context;
if (!resourceData) {
@ -81,7 +81,7 @@ export class ResourceColumnRenderer implements ColumnRenderer {
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
dayColumns.appendChild(column);
columnContainer.appendChild(column);
});
}
}

16
src/renderers/HeaderRenderer.ts
View file

@ -7,7 +7,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes';
* Interface for header rendering strategies
*/
export interface HeaderRenderer {
render(weekHeader: HTMLElement, context: HeaderRenderContext): void;
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
}
/**
@ -24,7 +24,7 @@ export interface HeaderRenderContext {
* Date-based header renderer (original functionality)
*/
export class DateHeaderRenderer implements HeaderRenderer {
render(weekHeader: HTMLElement, context: HeaderRenderContext): void {
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { currentWeek, config, allDayEvents = [] } = context;
const dates = this.getWeekDates(currentWeek);
@ -43,14 +43,14 @@ export class DateHeaderRenderer implements HeaderRenderer {
`;
(header as any).dataset.date = this.formatDate(date);
weekHeader.appendChild(header);
calendarHeader.appendChild(header);
});
// Render all-day events in row 2
this.renderAllDayEvents(weekHeader, context);
this.renderAllDayEvents(calendarHeader, context);
}
private renderAllDayEvents(weekHeader: HTMLElement, context: HeaderRenderContext): void {
private renderAllDayEvents(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { currentWeek, config, allDayEvents = [] } = context;
const dates = this.getWeekDates(currentWeek);
@ -96,7 +96,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
weekHeader.appendChild(allDayEvent);
calendarHeader.appendChild(allDayEvent);
}
});
}
@ -130,7 +130,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
* Resource-based header renderer
*/
export class ResourceHeaderRenderer implements HeaderRenderer {
render(weekHeader: HTMLElement, context: HeaderRenderContext): void {
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { resourceData } = context;
if (!resourceData) {
@ -150,7 +150,7 @@ export class ResourceHeaderRenderer implements HeaderRenderer {
<swp-resource-name>${resource.displayName}</swp-resource-name>
`;
weekHeader.appendChild(header);
calendarHeader.appendChild(header);
});
console.log(`ResourceHeaderRenderer: Rendered ${resourceData.resources.length} resource headers`);

18
src/utils/PositionUtils.js
View file

@ -106,9 +106,9 @@ export class PositionUtils {
static getDayColumnPosition(dayIndex) {
// These values should be calculated based on actual calendar layout
const timeAxisWidth = 60; // Default time axis width
const calendarElement = document.querySelector('swp-calendar-content');
const dayColumnWidth = calendarElement ?
(calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') :
const scrollableContent = document.querySelector('swp-scrollable-content');
const dayColumnWidth = scrollableContent ?
(scrollableContent.clientWidth) / calendarConfig.get('weekDays') :
120; // Default day column width
return timeAxisWidth + (dayIndex * dayColumnWidth);
@ -121,9 +121,9 @@ export class PositionUtils {
*/
static getDayIndexForPosition(pixelPosition) {
const timeAxisWidth = 60; // Default time axis width
const calendarElement = document.querySelector('swp-calendar-content');
const dayColumnWidth = calendarElement ?
(calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') :
const scrollableContent = document.querySelector('swp-scrollable-content');
const dayColumnWidth = scrollableContent ?
(scrollableContent.clientWidth) / calendarConfig.get('weekDays') :
120; // Default day column width
if (pixelPosition < timeAxisWidth) {
@ -152,10 +152,10 @@ export class PositionUtils {
const duration = endMinutes - startMinutes;
const calendarElement = document.querySelector('swp-calendar-content');
const scrollableContent = document.querySelector('swp-scrollable-content');
const timeAxisWidth = 60; // Default time axis width
const dayColumnWidth = calendarElement ?
(calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') :
const dayColumnWidth = scrollableContent ?
(scrollableContent.clientWidth) / calendarConfig.get('weekDays') :
120; // Default day column width
return {