New renders+css

src/v2/features/date/DateRenderer.ts

@@ -0,0 +1,38 @@
+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);
+    }
+  }
+}