38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { IGroupingRenderer } from '../../core/IGroupingRenderer';
|
|
import { RenderContext } from '../../core/RenderContext';
|
|
|
|
export interface IDateService {
|
|
parseISO(dateStr: string): Date;
|
|
getDayName(date: Date, format: 'short' | 'long'): string;
|
|
}
|
|
|
|
export const defaultDateService: IDateService = {
|
|
parseISO: (str) => new Date(str),
|
|
getDayName: (date, format) => date.toLocaleDateString('da-DK', { weekday: format })
|
|
};
|
|
|
|
export class DateRenderer implements IGroupingRenderer {
|
|
readonly type = 'date';
|
|
|
|
constructor(private dateService: IDateService = defaultDateService) {}
|
|
|
|
render(context: RenderContext): void {
|
|
for (const dateStr of context.values) {
|
|
const date = this.dateService.parseISO(dateStr);
|
|
|
|
const headerCell = document.createElement('swp-day-header');
|
|
headerCell.dataset.date = dateStr;
|
|
headerCell.innerHTML = `
|
|
<swp-day-name>${this.dateService.getDayName(date, 'short')}</swp-day-name>
|
|
<swp-day-date>${date.getDate()}</swp-day-date>
|
|
`;
|
|
context.headerContainer.appendChild(headerCell);
|
|
|
|
const column = document.createElement('swp-day-column');
|
|
column.dataset.date = dateStr;
|
|
if (context.parentId) column.dataset.parentId = context.parentId;
|
|
column.innerHTML = '<swp-events-layer></swp-events-layer>';
|
|
context.columnContainer.appendChild(column);
|
|
}
|
|
}
|
|
}
|