From f8e8cdb463987926dd3edb777b6edfff721c0857 Mon Sep 17 00:00:00 2001 From: Marco Kittel Date: Sun, 15 Jun 2025 21:11:42 +0200 Subject: [PATCH] Erzeugung eines generischen Kalenders mittels SolidJS. --- src/Calendar.tsx | 543 +++++++++++++---------------------------------- 1 file changed, 145 insertions(+), 398 deletions(-) diff --git a/src/Calendar.tsx b/src/Calendar.tsx index 5bd3a63..84eae1e 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -1,400 +1,147 @@ -export function CalendarComponent() { - return ( -
-
-
M
-
T
-
W
-
T
-
F
-
S
-
S
-
+import { For, createSignal, Show } from 'solid-js'; -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-

August 2024

-
- - -
-
-
- ) + +function getDateArray(year: number, month: number) { + //Das bedeutet Montag im englischen Wochenformat. + const startTagDerWoche = 1; + const offsetZumEnglischenSonntag = (7 - startTagDerWoche); + const wochenTagDesErsten = (new Date(year, month, 1).getDay() + offsetZumEnglischenSonntag) % 7; + const wochenTage = ['So', "Mo", "Di", "Mi", "Do", "Fr", "Sa"]; + 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 = []; + //Ist der erste im Monat der Starttag meiner Woche + if (wochenTagDesErsten == 0) { + } else { + const vorMonatTage = new Date(year, month, 0).getDate(); + for (let i = wochenTagDesErsten - 1; i >= 0; i--) { + const tagObj = { "value": vorMonatTage - i, "enabled": false } + tage.push(tagObj); + } + } + for (let i = 1; i <= new Date(year, month + 1, 0).getDate(); i++) { + const tagObj = { "value": i, "enabled": true } + tage.push(tagObj); + } + let nextDay = 1; + for (let i = tage.length; i < 42; i++) { + const tagObj = { "value": nextDay, "enabled": false } + tage.push(tagObj); + nextDay++; + } + return { "wochenTage": wochenTageNachAnfangsTag, "tage": tage, "monat": monatsNamen[month], "jahr": year } +} + +export function CalendarComponent() { + const [month, setMonth] = createSignal(0); + const [year, setYear] = createSignal(2025); + const weekdays = getDateArray(year(), month()).wochenTage; + + let onclickNextMonth = () => { + if (month() >= 11) { + setMonth(0); + setYear(year() + 1); + return; + } + setMonth(month() + 1); + }; + + let onclickPrevMonth = () => { + if (month() <= 0) { + setMonth(11); + setYear(year() - 1); + return; + } + setMonth(month() - 1); + }; + + return ( +
+
+ + {(day) =>
{day}
} + +
+
+ + {(day) => + + +
+ } + + + > +
+ +
+ + } + +
+ + +
+

{getDateArray(year(), month()).monat} {getDateArray(year(), month()).jahr}

+
+ + +
+
+ + ) } \ No newline at end of file