Calendar/src/renderers/DateHeaderRenderer.ts

62 lines
2 KiB
TypeScript
Raw Normal View History

2025-08-07 00:15:44 +02:00
// Header rendering strategy interface and implementations
2025-11-03 22:04:37 +01:00
import { Configuration } from '../configurations/CalendarConfig';
import { DateService } from '../utils/DateService';
2025-08-07 00:15:44 +02:00
/**
* Interface for header rendering strategies
*/
export interface IHeaderRenderer {
2025-11-03 21:30:50 +01:00
render(calendarHeader: HTMLElement, context: IHeaderRenderContext): void;
}
2025-08-07 00:15:44 +02:00
/**
* Context for header rendering
*/
2025-11-03 21:30:50 +01:00
export interface IHeaderRenderContext {
2025-08-07 00:15:44 +02:00
currentWeek: Date;
2025-11-03 21:30:50 +01:00
config: Configuration;
2025-08-07 00:15:44 +02:00
}
/**
* Date-based header renderer (original functionality)
*/
export class DateHeaderRenderer implements IHeaderRenderer {
private dateService!: DateService;
2025-11-03 21:30:50 +01:00
render(calendarHeader: HTMLElement, context: IHeaderRenderContext): void {
const { currentWeek, config } = context;
// FIRST: Always create all-day container as part of standard header structure
const allDayContainer = document.createElement('swp-allday-container');
calendarHeader.appendChild(allDayContainer);
// Initialize date service with timezone and locale from config
2025-11-03 22:04:37 +01:00
const timezone = config.timeFormatConfig.timezone;
const locale = config.timeFormatConfig.locale;
this.dateService = new DateService(config);
const workWeekSettings = config.getWorkWeekSettings();
const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);
2025-11-03 22:04:37 +01:00
const weekDays = config.dateViewSettings.weekDays;
2025-08-07 00:15:44 +02:00
const daysToShow = dates.slice(0, weekDays);
daysToShow.forEach((date, index) => {
2025-08-07 00:15:44 +02:00
const header = document.createElement('swp-day-header');
if (this.dateService.isSameDay(date, new Date())) {
2025-08-07 00:15:44 +02:00
(header as any).dataset.today = 'true';
}
const dayName = this.dateService.getDayName(date, 'long', locale).toUpperCase();
2025-08-07 00:15:44 +02:00
header.innerHTML = `
<swp-day-name>${dayName}</swp-day-name>
2025-08-07 00:15:44 +02:00
<swp-day-date>${date.getDate()}</swp-day-date>
`;
(header as any).dataset.date = this.dateService.formatISODate(date);
calendarHeader.appendChild(header);
2025-08-07 00:15:44 +02:00
});
}
}