Calender View Einheitliche Ränder

anwendung/src/components/CalenderView.jsx

@@ -99,13 +99,10 @@ export default function CalenderView(p) {
                 current = null;
             }
 
-            if(current != null)
-            {
+            if (current != null) {
                 let temp = []
-                for(let i = 0; i < current_list.length; i++)
-                {
-                    if(current_list[i] !== current)
-                    {
+                for (let i = 0; i < current_list.length; i++) {
+                    if (current_list[i] !== current) {
                         temp.push(current_list[i]);
                     }
                 }
@@ -183,8 +180,14 @@ export default function CalenderView(p) {
         return integer + ":" + minutes_string;
     }
 
+    let temp = []
+    for (let i = 0; i < 96; i++) {
+        temp.push(i);
+    }
+
     return (
-        <div id={t}>
+        <div id={t} style={{border: "2px solid #363636", borderRadius: 5}}>
+            <div style={{backgroundColor: "#363636"}}>
                 <div className={"wochen-tag-container"}>
                     <div className={"wochen-tag font-small"}>Montag</div>
                     <div className={"wochen-tag font-small"}>Dienstag</div>
@@ -193,6 +196,7 @@ export default function CalenderView(p) {
                     <div className={"wochen-tag font-small"}>Freitag</div>
                     <div className={"wochen-tag font-small"}>Samstag</div>
                 </div>
+            </div>
             <div className={"calender-container"}>
                 <div className={"calender-view"}>
                     <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
@@ -202,7 +206,9 @@ export default function CalenderView(p) {
                         {entries["mo"].map(d => (<div className={"entry"} style={{
                             width: "100%",
                             gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point
+                            gridRowEnd: d.end_point,
+                            gridColumnStart: 0,
+                            gridColumnEnd: 0
                         }} id={"entry"}>
                             <div className={"resize-grab"} id={"grab"}></div>
                             <p>{internal_to_time(d.start_point)}</p>
@@ -287,6 +293,8 @@ export default function CalenderView(p) {
                         </div>))}
                     </div>
                 </div>
+
+
             </div>
         </div>
     )

anwendung/src/pages/index.js

@@ -17,8 +17,9 @@ export default function Home(p) {
     return (
 
         <>
-            <div style={{height: 100}}></div>
+            <div style={{height: 50}}></div>
             <CalenderView/>
+            <PopUp/>
         </>
 
     )

anwendung/src/styles/globals.css

@@ -186,11 +186,14 @@ Popup
 Calender View
  */
 
+::-webkit-scrollbar {
+  display: none;
+}
+
 .calender-container
 {
   max-height: 300px;
   overflow-y: scroll;
-  border-bottom: 2px solid #5d606e;
 }
 
 .wochen-tag-container
@@ -198,11 +201,10 @@ Calender View
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-right: 1.5%;
   height: 25px;
-  background-color: #5d606e;
-  border: 2px solid  #5d606e;
-  border-radius: 5px 5px 0 0;
+  width: 500px;
+  gap: 2px;
+  background-color: #363636;
 }
 
 .calender-view
@@ -215,13 +217,12 @@ Calender View
   /*
   End Test
    */
-  background-color: #5d606e;
+  background-color: #363636;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: stretch;
   gap: 2px;
-  padding: 0 2px 0 2px;
   user-select: none;
 }
 
@@ -239,7 +240,7 @@ Calender View
 {
   text-align: center;
   background-color: #f80000;
-  width: 16%;
+  width: 100px;
   color: white;
   border-radius: 5px;
   display: flex;