From 57c544c861967ad50cfa1cf089ff2c1ef6a4eb88 Mon Sep 17 00:00:00 2001 From: Jonas <60574217+Jodekq@users.noreply.github.com> Date: Thu, 15 Feb 2024 13:04:53 +0100 Subject: [PATCH] Commit Calendar works now --- src/client/calendar/_src/index.ts | 74 ++++++++++++++++ src/client/calendar/_styles/index.scss | 43 ++++++++++ src/client/calendar/index.html | 112 +++++++++++++++---------- 3 files changed, 183 insertions(+), 46 deletions(-) diff --git a/src/client/calendar/_src/index.ts b/src/client/calendar/_src/index.ts index e69de29..2c2e9e5 100644 --- a/src/client/calendar/_src/index.ts +++ b/src/client/calendar/_src/index.ts @@ -0,0 +1,74 @@ +function getCurrentWeek(): string { + const today: Date = new Date(); + const firstDayOfWeek: Date = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1); + const lastDayOfWeek: Date = new Date(firstDayOfWeek); + lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6); + + return `${firstDayOfWeek.toLocaleDateString()} - ${lastDayOfWeek.toLocaleDateString()}`; + } + +function updateCalendarOnLoad(): void { + // update weekl + const currentWeekElement: HTMLSpanElement | null = document.getElementById("current-week"); + const weekDayElements: NodeListOf = document.querySelectorAll(".week-day"); + + const today: Date = new Date(); + + if (currentWeekElement) { + currentWeekElement.innerHTML = getCurrentWeek(); + } + + const weekContainers: NodeListOf = document.querySelectorAll(".week-container .week"); + weekContainers.forEach((week, index) => { + const currentDate: Date = new Date(); + currentDate.setDate(currentDate.getDate() - currentDate.getDay() + index + 1); + + const dayId: string = currentDate.toLocaleDateString().replace(/\./g, "-"); + week.id = dayId; + + const weekDaySpan: HTMLSpanElement | null = weekDayElements[index]; + if (weekDaySpan) { + weekDaySpan.innerHTML = currentDate.toLocaleDateString(); + if (currentDate.toDateString() === today.toDateString()) { + week.classList.add("current-day"); + } + } + }); + + // update month + const currentMonthElement: HTMLSpanElement | null = document.querySelector(".current-month"); + const monthContainers: NodeListOf = document.querySelectorAll(".month-container .month"); + + const firstDayOfMonth: Date = new Date(today.getFullYear(), today.getMonth(), 1); + const lastDayOfMonth: Date = new Date(today.getFullYear(), today.getMonth() + 1, 0); + + if (currentMonthElement) { + const monthName: string = today.toLocaleString('default', { month: 'long' }); + currentMonthElement.innerHTML = `${monthName}, ${today.getFullYear()}`; + } + + monthContainers.forEach((month, index) => { + const currentDate: Date = new Date(firstDayOfMonth); + currentDate.setDate(currentDate.getDate() + index); + + const monthId: string = currentDate.toLocaleDateString().replace(/\./g, "-"); + month.id = monthId; + + if (index === today.getDate() - 1) { + month.classList.add("current-day"); + } + + const monthDaySpan: HTMLSpanElement | null = month.querySelector(".month-header .month-day"); + if (monthDaySpan) { + monthDaySpan.innerHTML = currentDate.toLocaleDateString(); + + // day outside month + if (currentDate < firstDayOfMonth || currentDate > lastDayOfMonth) { + monthDaySpan.classList.add("not-month-day"); + } + } + }); +} + +window.onload = updateCalendarOnLoad; + \ No newline at end of file diff --git a/src/client/calendar/_styles/index.scss b/src/client/calendar/_styles/index.scss index 190f671..16086d0 100644 --- a/src/client/calendar/_styles/index.scss +++ b/src/client/calendar/_styles/index.scss @@ -79,10 +79,22 @@ border-radius: var(--border-radius); height: 300px; cursor: pointer; + padding: var(--small-gap); &:hover { border: 2px solid var(--dark-2); } + + .week-header { + display: flex; + align-items: center; + flex-direction: column; + color: var(--dark-text); + + .week-day { + font-size: 14px; + } + } } .current-day { @@ -129,10 +141,41 @@ border: 2px solid var(--dark-3); border-radius: var(--border-radius); cursor: pointer; + padding: var(--small-gap); &:hover { border: 2px solid var(--dark-2); } + + .month-header { + display: flex; + justify-content: center; + + .month-day { + color: var(--dark-text); + } + + .not-month-day { + color: var(--dark-2); + } + } + } + + .current-day { + border: 2px solid var(--secondary); + + &:hover { + border: 2px solid var(--primary); + } + + .month-header { + display: flex; + justify-content: center; + + .month-day { + color: var(--text); + } + } } } } diff --git a/src/client/calendar/index.html b/src/client/calendar/index.html index 37293c7..3bede40 100644 --- a/src/client/calendar/index.html +++ b/src/client/calendar/index.html @@ -22,31 +22,51 @@
Week
- 7.KW - 12.02 - 18.02 +
- +
+ Monday + +
- +
+ Tuesday + +
-
- +
+
+ Wednesday + +
- +
+ Thursday + +
- +
+ Friday + +
- +
+ Saturday + +
- +
+ Sunday + +
@@ -54,45 +74,45 @@
Week
Month
- February, 2024 +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+