8ca49037e9
Adds locale support to the date header renderer and date service. This change ensures that the day names are displayed correctly based on the user's configured locale. The date header now uses the configured locale to display the day name in the correct language. The day name is now displayed in uppercase. Additionally, styles the date header to highlight today's date.
92 lines
No EOL
2.9 KiB
TypeScript
92 lines
No EOL
2.9 KiB
TypeScript
// Header rendering strategy interface and implementations
|
|
|
|
import { CalendarConfig } from '../core/CalendarConfig';
|
|
import { ResourceCalendarData } from '../types/CalendarTypes';
|
|
import { DateService } from '../utils/DateService';
|
|
|
|
/**
|
|
* Interface for header rendering strategies
|
|
*/
|
|
export interface HeaderRenderer {
|
|
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
|
|
}
|
|
|
|
|
|
/**
|
|
* Context for header rendering
|
|
*/
|
|
export interface HeaderRenderContext {
|
|
currentWeek: Date;
|
|
config: CalendarConfig;
|
|
resourceData?: ResourceCalendarData | null;
|
|
}
|
|
|
|
/**
|
|
* Date-based header renderer (original functionality)
|
|
*/
|
|
export class DateHeaderRenderer implements HeaderRenderer {
|
|
private dateService!: DateService;
|
|
|
|
render(calendarHeader: HTMLElement, context: HeaderRenderContext): 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
|
|
const timezone = config.getTimezone?.() || 'Europe/Copenhagen';
|
|
const locale = config.getLocale?.() || 'da-DK';
|
|
this.dateService = new DateService(timezone);
|
|
|
|
const workWeekSettings = config.getWorkWeekSettings();
|
|
const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);
|
|
const weekDays = config.getDateViewSettings().weekDays;
|
|
const daysToShow = dates.slice(0, weekDays);
|
|
|
|
daysToShow.forEach((date, index) => {
|
|
const header = document.createElement('swp-day-header');
|
|
if (this.dateService.isSameDay(date, new Date())) {
|
|
(header as any).dataset.today = 'true';
|
|
}
|
|
|
|
const dayName = this.dateService.getDayName(date, 'long', locale).toUpperCase();
|
|
|
|
header.innerHTML = `
|
|
<swp-day-name>${dayName}</swp-day-name>
|
|
<swp-day-date>${date.getDate()}</swp-day-date>
|
|
`;
|
|
(header as any).dataset.date = this.dateService.formatISODate(date);
|
|
|
|
calendarHeader.appendChild(header);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Resource-based header renderer
|
|
*/
|
|
export class ResourceHeaderRenderer implements HeaderRenderer {
|
|
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
|
|
const { resourceData } = context;
|
|
|
|
if (!resourceData) {
|
|
return;
|
|
}
|
|
|
|
resourceData.resources.forEach((resource) => {
|
|
const header = document.createElement('swp-resource-header');
|
|
header.setAttribute('data-resource', resource.name);
|
|
header.setAttribute('data-employee-id', resource.employeeId);
|
|
|
|
header.innerHTML = `
|
|
<swp-resource-avatar>
|
|
<img src="${resource.avatarUrl}" alt="${resource.displayName}" onerror="this.style.display='none'">
|
|
</swp-resource-avatar>
|
|
<swp-resource-name>${resource.displayName}</swp-resource-name>
|
|
`;
|
|
|
|
calendarHeader.appendChild(header);
|
|
});
|
|
}
|
|
} |