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

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