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 (
+        <div className={"Down"}>
+            {result.map((monthResult, index = 0) => (
+                <div key={months} className={"A"}>
+                    <p>{getMonthName(index)}</p>
+                    <div className={"Days"}>
+                        {monthResult.map((date) => (
+                            <p key={date}>{date}</p>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+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 <Component {...pageProps} />
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 (
 
         <div className={"normal-centered"}>
-            <Login/>
+            <BasicDateCalendar/>
         </div>
 
     )
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