From 59fa7185cc32042e50628e2ed828554c39b51008 Mon Sep 17 00:00:00 2001 From: AliGitGut Date: Sun, 21 May 2023 14:50:39 +0200 Subject: [PATCH] Calendar Side Bar added MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Calendar Side Bar and CSS File added Don´t touch it, CSS makes problems --- anwendung/src/components/CalendarSideBar.jsx | 113 +++++++++++++++++++ anwendung/src/pages/_app.js | 1 + anwendung/src/pages/index.js | 3 +- anwendung/src/styles/calendarSideBar.css | 35 ++++++ 4 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 anwendung/src/components/CalendarSideBar.jsx create mode 100644 anwendung/src/styles/calendarSideBar.css diff --git a/anwendung/src/components/CalendarSideBar.jsx b/anwendung/src/components/CalendarSideBar.jsx new file mode 100644 index 0000000..df841a4 --- /dev/null +++ b/anwendung/src/components/CalendarSideBar.jsx @@ -0,0 +1,113 @@ +let startParts = [] +let endParts = [] +const months = [["Januar", 31], ["Februar", 28], ["März", 31], ["April", 30], ["Mai", 31], ["Juni", 30], ["Juli", 31], ["August", 31], ["September", 30], ["Oktober", 31], ["November", 30], ["Dezember", 31]] +const days = months.map((month => month[1])) +let result = [] +let check = true +const weekdays = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"] +export default function BasicDateCalendar(p) { + if (check) { + generateCalendar("01.11.2023", "15.01.2024") + check = false + } + return ( +
+ {result.map((monthResult, index = 0) => ( +
+

{getMonthName(index)}

+
+ {monthResult.map((date) => ( +

{date}

+ ))} +
+
+ ))} +
+ ) +} + +function getMonthName(monthIndex) +{ + if (startParts[2] < endParts[2]) + { + + }else return months[startParts[1] - 1 + monthIndex][0] +} + +function generateCalendar(start, ende) +{ + splitter(start, ende) + if (startParts[2] < endParts[2]) + { + for (let i = startParts[1] - 1; i <= 11; i++) + { + let monthResult = []; + for (let j = 1; j <= days[i]; j++) + { + if ( + new Date(2023, i, j) >= new Date(2023, startParts[1] - 1, startParts[0]) && + new Date(2023, i, j) <= new Date(2023, 11, 31) + ) + { + monthResult.push(j); + } + } + result.push(monthResult); + if (i == 11) + { + for (let h = 0; h <= endParts[1] - 1; h++) + { + let monthResultNewYear = []; + for (let g = 1; g <= days[h]; g++) + { + if (new Date(2024, h, g) <= new Date(2024, endParts[1] - 1, endParts[0])) + { + monthResultNewYear.push(g); + } + } + result.push(monthResultNewYear); + } + } + } + } else + { + for (let i = startParts[1] - 1; i <= endParts[1] - 1; i++) + { + let monthResult = []; + for (let j = 1; j <= days[i]; j++) + { + if ( + new Date(2023, i, j) >= new Date(2023, startParts[1] - 1, startParts[0]) && + new Date(2023, i, j) <= new Date(2023, endParts[1] - 1, endParts[0]) + ) + { + monthResult.push(j); + } + } + result.push(monthResult); + } + } +} + +function splitter(startDate, endDate) +{ + startParts = startDate.split(".") + //Test() + if (startParts[1][0] === 0) //prüft ob die erste Stelle des Monats eine 0 vorne stehen hat + { + startParts[1] = startParts[1][1] //überschreibt den Monat ohne die 0 + } + endParts = endDate.split(".") //prüft ob die erste Stelle des Monats eine 0 vorne stehen hat + if (endParts[1][0] === 0) + { + endParts[1] = endParts[1][1] //überschreibt den Monat ohne die 0 + } +} + +function Test() +{ + let formattedDateStr = startParts[1] + "/" + startParts[0] + "/" + startParts[2]; + console.log(formattedDateStr) + let weekday = new Date(formattedDateStr).getDay(); + console.log(weekday); +} \ No newline at end of file diff --git a/anwendung/src/pages/_app.js b/anwendung/src/pages/_app.js index 2300201..db612e5 100644 --- a/anwendung/src/pages/_app.js +++ b/anwendung/src/pages/_app.js @@ -1,4 +1,5 @@ import '@/styles/globals.css' +import '@/styles/calendarSideBar.css' export default function App({ Component, pageProps }) { return diff --git a/anwendung/src/pages/index.js b/anwendung/src/pages/index.js index 55edae6..e6978e6 100644 --- a/anwendung/src/pages/index.js +++ b/anwendung/src/pages/index.js @@ -10,6 +10,7 @@ import DateElement from "@/components/DateElement"; import InputForm from "@/components/InputForm"; import Login from "@/components/Login"; import Test from "@/components/Test"; +import BasicDateCalendar from "@/components/CalendarSideBar"; @@ -21,7 +22,7 @@ export default function Home(p) { return (
- +
) diff --git a/anwendung/src/styles/calendarSideBar.css b/anwendung/src/styles/calendarSideBar.css new file mode 100644 index 0000000..6ae2780 --- /dev/null +++ b/anwendung/src/styles/calendarSideBar.css @@ -0,0 +1,35 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.A +{ + border: 2px solid; + border-color: black; + border-radius: 20px; + margin: 2px; + background: linear-gradient(to bottom, #FFC1C1, #CD3333); +} + +.Days +{ + display: inline-grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(5, 1fr); + height: 50%; + width: 100%; +} + +.Down +{ + border-radius: 20px; + display: inline-grid; + grid-column: auto; + height: 200%; + width: 20%; +} \ No newline at end of file