From 33ba07f30636f16ade1c54f1d2c2652374375681 Mon Sep 17 00:00:00 2001
From: "AzureAD\\KittelMarco" <kittel@take-e-way.de>
Date: Tue, 17 Jun 2025 12:10:41 +0200
Subject: [PATCH] =?UTF-8?q?Der=20Wochenstart-Tag=20kann=20per=20Klick=20au?=
 =?UTF-8?q?f=20den=20Wochentag=20im=20Header=20ge=C3=A4ndert=20werden.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Calendar.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Calendar.tsx b/src/Calendar.tsx
index 84eae1e..ab2003a 100644
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -1,16 +1,15 @@
 import { For, createSignal, Show } from 'solid-js';
 
 
-function getDateArray(year: number, month: number) {
+function getDateArray(year: number, month: number, startday: number) {
   //Das bedeutet Montag im englischen Wochenformat.
-  const startTagDerWoche = 1;
+  const startTagDerWoche = startday;
   const offsetZumEnglischenSonntag = (7 - startTagDerWoche);
   const wochenTagDesErsten = (new Date(year, month, 1).getDay() + offsetZumEnglischenSonntag) % 7;
-  const wochenTage = ['So', "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
+  const wochenTage = [{"dayname":"So", "dayInWeekArr":0}, {"dayname":"Mo", "dayInWeekArr":1}, {"dayname":"Di", "dayInWeekArr":2}, {"dayname":"Mi", "dayInWeekArr":3}, {"dayname":"Do", "dayInWeekArr":4}, {"dayname":"Fr", "dayInWeekArr":5}, {"dayname":"Sa", "dayInWeekArr":6}];
   const monatsNamen = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
   const wochenTageNachAnfangsTag = [];
   for (let i = startTagDerWoche; i < startTagDerWoche + 7; i++) {
-
     wochenTageNachAnfangsTag.push(wochenTage[i % 7]);
   }
   let tage = [];
@@ -33,13 +32,17 @@ function getDateArray(year: number, month: number) {
     tage.push(tagObj);
     nextDay++;
   }
-  return { "wochenTage": wochenTageNachAnfangsTag, "tage": tage, "monat": monatsNamen[month], "jahr": year }
+  return { "weekDay": wochenTageNachAnfangsTag, "days": tage, "month": monatsNamen[month], "year": year }
 }
 
 export function CalendarComponent() {
   const [month, setMonth] = createSignal(0);
   const [year, setYear] = createSignal(2025);
-  const weekdays = getDateArray(year(), month()).wochenTage;
+  const [startDay, setStartday] = createSignal(1);
+
+  let onclickDayOfWeekHeader = (day : number) => {
+    setStartday(day);
+  }
 
   let onclickNextMonth = () => {
     if (month() >= 11) {
@@ -62,13 +65,13 @@ export function CalendarComponent() {
   return (
     <div class="w-full max-w-sm mx-auto">
       <div class="text-center grid grid-cols-7">
-        <For each={weekdays}>
-          {(day) => <div>{day}</div>}
+        <For each={getDateArray(year(), month(), startDay()).weekDay}>
+          {(day) => <div><button onclick={()=> onclickDayOfWeekHeader(day.dayInWeekArr)}>{day.dayname}</button></div>}
         </For>
       </div>
       <div
         class="mt-4 overflow-hidden text-sm border rounded-lg shadow-md bg-base-200 gap-px grid grid-cols-7 shadow-base-month00/20">
-        <For each={getDateArray(year(), month()).tage}>
+        <For each={getDateArray(year(), month(), startDay()).days}>
           {(day) =>
             <Show when={day.enabled}
             fallback={
@@ -95,7 +98,7 @@ export function CalendarComponent() {
 
 
       <div class="flex items-center mt-4">
-        <h2 class="flex-auto text-sm font-medium text-black">{getDateArray(year(), month()).monat} {getDateArray(year(), month()).jahr}</h2>
+        <h2 class="flex-auto text-sm font-medium text-black">{getDateArray(year(), month(),startDay()).month} {getDateArray(year(), month(), startDay()).year}</h2>
         <div class="flex items-center gap-1">
           <button
             type="button"