CalenderView Tage Always on top

Tage in der Kalender werden nicht mit gescrolled

anwendung/src/components/CalenderView.jsx

@@ -14,43 +14,30 @@ let selectedListID = "";
 export default function CalenderView(p) {
     const [t, setT] = useState(false)
 
-    function mouse_move(e)
-    {
-        if(mouseDown)
-        {
+    function mouse_move(e) {
+        if (mouseDown) {
             let y_window = e.clientY;
             let y_target_offset = e.currentTarget.getBoundingClientRect().top;
             let id = e.currentTarget.id;
             let row = Math.floor((y_window - y_target_offset) / 10) + 1
 
-            if(grabbed != null)
-            {
-                if(grabbedUp)
-                {
-                    if (row < grabbed.end_point)
-                    {
+            if (grabbed != null) {
+                if (grabbedUp) {
+                    if (row < grabbed.end_point - 1) {
                         grabbed.start_point = row;
                     }
-                }
-                else
-                {
-                    if(row > grabbed.start_point)
-                    {
+                } else {
+                    if (row > grabbed.start_point) {
                         grabbed.end_point = row + 1;
                     }
                 }
-            }
-            else if(selectedElement != null)
-            {
-                if (selectedListID !== id)
-                {
+            } else if (selectedElement != null) {
+                if (selectedListID !== id) {
                     let index = -1;
                     let currentList = entries[selectedListID];
                     let temp = [];
-                    for(let i = 0; i < currentList.length; i++)
-                    {
-                        if(selectedElement !== currentList[i])
-                        {
+                    for (let i = 0; i < currentList.length; i++) {
+                        if (selectedElement !== currentList[i]) {
                             temp.push(currentList[i]);
                         }
                     }
@@ -67,20 +54,17 @@ export default function CalenderView(p) {
         setT(!t);
     }
 
-    function mouse_up(e)
-    {
+    function mouse_up(e) {
         mouseDown = false;
         let y_window = e.clientY;
         let y_target_offset = e.currentTarget.getBoundingClientRect().top;
         let row = Math.floor((y_window - y_target_offset) / 10) + 1
         let current_list = entries[e.currentTarget.id];
 
-        if (grabbed != null)
-        {
+        if (grabbed != null) {
             grabbed = null;
         }
-        if(selectedElement != null)
-        {
+        if (selectedElement != null) {
             selectedElement = null;
         }
 
@@ -95,37 +79,27 @@ export default function CalenderView(p) {
         let row = Math.floor((y_window - y_target_offset) / 10) + 1;
         let current_list = entries[e.currentTarget.id];
 
-        if(e.target.id === "grab")
-        {
+        if (e.target.id === "grab") {
             let entry = e.target.parentElement;
-            let rowStart= parseInt(window.getComputedStyle(entry).gridRowStart);
+            let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
 
-            for(let i = 0; i < current_list.length; i++)
-            {
+            for (let i = 0; i < current_list.length; i++) {
                 let current = current_list[i];
-                if(current.start_point === row || current.end_point === row+1)
-                {
+                if (current.start_point === row || current.end_point === row + 1) {
                     grabbed = current;
                     break;
                 }
             }
 
-            if(row === rowStart)
-            {
+            if (row === rowStart) {
                 grabbedUp = true;
-            }
-            else
-            {
+            } else {
                 grabbedUp = false;
             }
-        }
-        else if(e.target.id === "entry")
-        {
-            for(let i = 0; i < current_list.length; i++)
-            {
+        } else if (e.target.id === "entry") {
+            for (let i = 0; i < current_list.length; i++) {
                 let current = current_list[i];
-                if(current.start_point <= row && current.end_point >= row)
-                {
+                if (current.start_point <= row && current.end_point >= row) {
                     selectedElement = current;
                     selectedListID = e.currentTarget.id;
                     break;
@@ -135,10 +109,8 @@ export default function CalenderView(p) {
 
             selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
             selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
-        }
-        else
-        {
-            if (row <= 98 && row > 3) {
+        } else {
+            if (row < 96) {
                 let free = true;
                 for (let i = 0; i < current_list.length; i++) {
                     let current = current_list[i];
@@ -162,7 +134,7 @@ export default function CalenderView(p) {
     }
 
     function internal_to_time(internal) {
-        internal -= 4
+        internal -= 1
         internal /= 4
         let integer = Math.floor(internal)
         let decimal = internal.toFixed(2);
@@ -172,88 +144,108 @@ export default function CalenderView(p) {
     }
 
     return (
-        <div className={"calender-container"} id={t}>
-            <div className={"calender-view"}>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"mo"}>
-                    <div className={"wochen-tag font-small"}>Montag</div>
-                    {entries["mo"].map(d => (<div className={"entry"} style={{
-                        width: "100%",
-                        gridRowStart: d.start_point,
-                        gridRowEnd: d.end_point
-                    }} id={"entry"}>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                        <p>{internal_to_time(d.start_point)}</p>
-                        <p>{internal_to_time(d.end_point)}</p>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                    </div>))}
-                </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"tu"}>
-                    <div className={"wochen-tag font-small"}>Dienstag</div>
-                    {entries["tu"].map(d => (<div className={"entry"} style={{
-                        width: "100%",
-                        gridRowStart: d.start_point,
-                        gridRowEnd: d.end_point
-                    }} id={"entry"}>
+        <div>
+            <div className={"wochen-tag-container"}>
+                <div className={"wochen-tag font-small"}>Montag</div>
+                <div className={"wochen-tag font-small"}>Dienstag</div>
+                <div className={"wochen-tag font-small"}>Mittwoch</div>
+                <div className={"wochen-tag font-small"}>Donnerstag</div>
+                <div className={"wochen-tag font-small"}>Freitag</div>
+                <div className={"wochen-tag font-small"}>Samstag</div>
+            </div>
+            <div className={"calender-container"} id={t}>
+                <div className={"calender-view"}>
+                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                         id={"mo"}>
 
-                        <div className={"resize-grab"} id={"grab"}></div>
-                        <p>{internal_to_time(d.start_point)}</p>
-                        <p>{internal_to_time(d.end_point)}</p>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                    </div>))}
-                </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"we"}>
-                    <div className={"wochen-tag font-small"}>Mittwoch</div>
-                    {entries["we"].map(d => (<div className={"entry"} style={{
-                        width: "100%",
-                        gridRowStart: d.start_point,
-                        gridRowEnd: d.end_point
-                    }} id={"entry"}>
 
-                        <div className={"resize-grab"} id={"grab"}></div>
-                        <p>{internal_to_time(d.start_point)}</p>
-                        <p>{internal_to_time(d.end_point)}</p>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                    </div>))}
-                </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"th"}>
-                    <div className={"wochen-tag font-small"}>Donnerstag</div>
-                    {entries["th"].map(d => (<div className={"entry"} style={{
-                        width: "100%",
-                        gridRowStart: d.start_point,
-                        gridRowEnd: d.end_point
-                    }} id={"entry"}>
+                        {entries["mo"].map(d => (<div className={"entry"} style={{
+                            width: "100%",
+                            gridRowStart: d.start_point,
+                            gridRowEnd: d.end_point
+                        }} id={"entry"}>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                            <p>{internal_to_time(d.start_point)}</p>
+                            <p>{internal_to_time(d.end_point)}</p>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                        </div>))}
+                    </div>
+                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                         id={"tu"}>
 
-                        <div className={"resize-grab"} id={"grab"}></div>
-                        <p>{internal_to_time(d.start_point)}</p>
-                        <p>{internal_to_time(d.end_point)}</p>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                    </div>))}
-                </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"fr"}>
-                    <div className={"wochen-tag font-small"}>Freitag</div>
-                    {entries["fr"].map(d => (<div className={"entry"} style={{
-                        width: "100%",
-                        gridRowStart: d.start_point,
-                        gridRowEnd: d.end_point
-                    }} id={"entry"}>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                        <p>{internal_to_time(d.start_point)}</p>
-                        <p>{internal_to_time(d.end_point)}</p>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                    </div>))}
-                </div>
-                <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"sa"}>
-                    <div className={"wochen-tag font-small"}>Samstag</div>
-                    {entries["sa"].map(d => (<div className={"entry"} style={{
-                        width: "100%",
-                        gridRowStart: d.start_point,
-                        gridRowEnd: d.end_point
-                    }} id={"entry"}>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                        <p>{internal_to_time(d.start_point)}</p>
-                        <p>{internal_to_time(d.end_point)}</p>
-                        <div className={"resize-grab"} id={"grab"}></div>
-                    </div>))}
+                        {entries["tu"].map(d => (<div className={"entry"} style={{
+                            width: "100%",
+                            gridRowStart: d.start_point,
+                            gridRowEnd: d.end_point
+                        }} id={"entry"}>
+
+                            <div className={"resize-grab"} id={"grab"}></div>
+                            <p>{internal_to_time(d.start_point)}</p>
+                            <p>{internal_to_time(d.end_point)}</p>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                        </div>))}
+                    </div>
+                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                         id={"we"}>
+
+
+                        {entries["we"].map(d => (<div className={"entry"} style={{
+                            width: "100%",
+                            gridRowStart: d.start_point,
+                            gridRowEnd: d.end_point
+                        }} id={"entry"}>
+
+                            <div className={"resize-grab"} id={"grab"}></div>
+                            <p>{internal_to_time(d.start_point)}</p>
+                            <p>{internal_to_time(d.end_point)}</p>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                        </div>))}
+                    </div>
+                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                         id={"th"}>
+
+                        {entries["th"].map(d => (<div className={"entry"} style={{
+                            width: "100%",
+                            gridRowStart: d.start_point,
+                            gridRowEnd: d.end_point
+                        }} id={"entry"}>
+
+                            <div className={"resize-grab"} id={"grab"}></div>
+                            <p>{internal_to_time(d.start_point)}</p>
+                            <p>{internal_to_time(d.end_point)}</p>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                        </div>))}
+                    </div>
+                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                         id={"fr"}>
+
+
+                        {entries["fr"].map(d => (<div className={"entry"} style={{
+                            width: "100%",
+                            gridRowStart: d.start_point,
+                            gridRowEnd: d.end_point
+                        }} id={"entry"}>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                            <p>{internal_to_time(d.start_point)}</p>
+                            <p>{internal_to_time(d.end_point)}</p>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                        </div>))}
+                    </div>
+                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                         id={"sa"}>
+
+
+                        {entries["sa"].map(d => (<div className={"entry"} style={{
+                            width: "100%",
+                            gridRowStart: d.start_point,
+                            gridRowEnd: d.end_point
+                        }} id={"entry"}>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                            <p>{internal_to_time(d.start_point)}</p>
+                            <p>{internal_to_time(d.end_point)}</p>
+                            <div className={"resize-grab"} id={"grab"}></div>
+                        </div>))}
+                    </div>
                 </div>
             </div>
         </div>

anwendung/src/pages/index.js

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

anwendung/src/styles/globals.css

@@ -188,9 +188,21 @@ Calender View
 
 .calender-container
 {
-  margin-top: 100px;
   max-height: 300px;
   overflow-y: scroll;
+  border-bottom: 2px solid #5d606e;
+}
+
+.wochen-tag-container
+{
+  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;
 }
 
 .calender-view
@@ -207,10 +219,9 @@ Calender View
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  border-radius: 5px;
   justify-content: stretch;
   gap: 2px;
-  padding: 2px;
+  padding: 0 2px 0 2px;
   user-select: none;
 }
 
@@ -221,16 +232,16 @@ Calender View
   background-color: white;
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: repeat(100, 10px);
+  grid-template-rows: repeat(96, 10px);
 }
 
-.spalte .wochen-tag
+.wochen-tag-container .wochen-tag
 {
   text-align: center;
   background-color: #f80000;
-  width: 100%;
+  width: 16%;
   color: white;
-  border-radius: 5px 5px 0 0;
+  border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -262,4 +273,6 @@ Calender View
 {
   color: white;
   font-size: 5px;
+  cursor: default;
+  pointer-events: none;
 }