kitt
/
CalendarComponent
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Der Wochenstart-Tag kann per Klick auf den Wochentag im Header geändert werden.

This commit is contained in:
AzureAD\KittelMarco 2025-06-17 12:10:41 +02:00
parent f8e8cdb463
commit 33ba07f306
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Calendar.tsx
View File

@ -1,16 +1,15 @@
import { For, createSignal, Show } from 'solid-js'; 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. //Das bedeutet Montag im englischen Wochenformat.
const startTagDerWoche = 1; const startTagDerWoche = startday;
const offsetZumEnglischenSonntag = (7 - startTagDerWoche); const offsetZumEnglischenSonntag = (7 - startTagDerWoche);
const wochenTagDesErsten = (new Date(year, month, 1).getDay() + offsetZumEnglischenSonntag) % 7; 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 monatsNamen = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
const wochenTageNachAnfangsTag = []; const wochenTageNachAnfangsTag = [];
for (let i = startTagDerWoche; i < startTagDerWoche + 7; i++) { for (let i = startTagDerWoche; i < startTagDerWoche + 7; i++) {
wochenTageNachAnfangsTag.push(wochenTage[i % 7]); wochenTageNachAnfangsTag.push(wochenTage[i % 7]);
} }
let tage = []; let tage = [];
@ -33,13 +32,17 @@ function getDateArray(year: number, month: number) {
tage.push(tagObj); tage.push(tagObj);
nextDay++; nextDay++;
} }
return { "wochenTage": wochenTageNachAnfangsTag, "tage": tage, "monat": monatsNamen[month], "jahr": year } return { "weekDay": wochenTageNachAnfangsTag, "days": tage, "month": monatsNamen[month], "year": year }
} }
export function CalendarComponent() { export function CalendarComponent() {
const [month, setMonth] = createSignal(0); const [month, setMonth] = createSignal(0);
const [year, setYear] = createSignal(2025); const [year, setYear] = createSignal(2025);
const weekdays = getDateArray(year(), month()).wochenTage; const [startDay, setStartday] = createSignal(1);
let onclickDayOfWeekHeader = (day : number) => {
setStartday(day);
}
let onclickNextMonth = () => { let onclickNextMonth = () => {
if (month() >= 11) { if (month() >= 11) {
@ -62,13 +65,13 @@ export function CalendarComponent() {
return ( return (
<div class="w-full max-w-sm mx-auto"> <div class="w-full max-w-sm mx-auto">
<div class="text-center grid grid-cols-7"> <div class="text-center grid grid-cols-7">
<For each={weekdays}> <For each={getDateArray(year(), month(), startDay()).weekDay}>
{(day) => <div>{day}</div>} {(day) => <div><button onclick={()=> onclickDayOfWeekHeader(day.dayInWeekArr)}>{day.dayname}</button></div>}
</For> </For>
</div> </div>
<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"> 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) => {(day) =>
<Show when={day.enabled} <Show when={day.enabled}
fallback={ fallback={
@ -95,7 +98,7 @@ export function CalendarComponent() {
<div class="flex items-center mt-4"> <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"> <div class="flex items-center gap-1">
<button <button
type="button" type="button"