From 8ca49037e926dbcd86ad9f3e443a22ca953ba918 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Thu, 9 Oct 2025 23:08:33 +0200
Subject: [PATCH] Improves date header localization

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.
---
 src/core/CalendarConfig.ts          |  7 +++++++
 src/renderers/HeaderRenderer.ts     | 17 +++++++++--------
 src/utils/DateService.ts            |  5 +++--
 wwwroot/css/calendar-layout-css.css | 24 ++++++++++++------------
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/core/CalendarConfig.ts b/src/core/CalendarConfig.ts
index cb731fc..20d1b31 100644
--- a/src/core/CalendarConfig.ts
+++ b/src/core/CalendarConfig.ts
@@ -546,6 +546,13 @@ export class CalendarConfig {
     return this.timeFormatConfig.timezone;
   }
 
+  /**
+   * Get configured locale
+   */
+  getLocale(): string {
+    return this.timeFormatConfig.locale;
+  }
+
   /**
    * Check if using 24-hour format
    */
diff --git a/src/renderers/HeaderRenderer.ts b/src/renderers/HeaderRenderer.ts
index 77ba231..25a86fa 100644
--- a/src/renderers/HeaderRenderer.ts
+++ b/src/renderers/HeaderRenderer.ts
@@ -29,15 +29,16 @@ export class DateHeaderRenderer implements HeaderRenderer {
 
   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 config
+
+    // 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;
@@ -48,15 +49,15 @@ export class DateHeaderRenderer implements HeaderRenderer {
       if (this.dateService.isSameDay(date, new Date())) {
         (header as any).dataset.today = 'true';
       }
-      
-      const dayName = this.dateService.getDayName(date, 'short');
-      
+
+      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);
     });
   }
diff --git a/src/utils/DateService.ts b/src/utils/DateService.ts
index 48c6e87..daf6a87 100644
--- a/src/utils/DateService.ts
+++ b/src/utils/DateService.ts
@@ -139,10 +139,11 @@ export class DateService {
    * Get day name for a date
    * @param date - Date to get day name for
    * @param format - 'short' (e.g., 'Mon') or 'long' (e.g., 'Monday')
+   * @param locale - Locale for day name (default: 'da-DK')
    * @returns Day name
    */
-  public getDayName(date: Date, format: 'short' | 'long' = 'short'): string {
-    const formatter = new Intl.DateTimeFormat('en-US', {
+  public getDayName(date: Date, format: 'short' | 'long' = 'short', locale: string = 'da-DK'): string {
+    const formatter = new Intl.DateTimeFormat(locale, {
       weekday: format
     });
     return formatter.format(date);
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 755ca7b..c333e5d 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -246,7 +246,7 @@ swp-day-header {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-top: 7px;
+  padding-top: 3px;
 }
 
 swp-day-header:last-child {
@@ -299,27 +299,27 @@ swp-day-name {
   font-weight: 500;
   font-size: 12px;
   color: var(--color-text-secondary);
+  letter-spacing: 0.1em;
 }
 
 swp-day-date {
   display: block;
-  font-size: 20px;
-  font-weight: 600;
+  font-size: 30px;
   margin-top: 4px;
-  height: 41px;
+}
 
+/* Highlight entire header for today */
+swp-day-header[data-today="true"] {
+  background: rgba(33, 150, 243, 0.1);
+}
+
+swp-day-header[data-today="true"] swp-day-name {
+  color: var(--color-primary);
+  font-weight: 600;
 }
 
 swp-day-header[data-today="true"] swp-day-date {
   color: var(--color-primary);
-  background: rgba(33, 150, 243, 0.1);
-  border-radius: 50%;
-  width: 41px;
-  height: 41px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 4px auto 0;
 }
 
 /* Ghost columns for mouseenter events */