Calender View Delete Elements

Calender View Delete Elements with Right click

anwendung/src/components/CalenderView.jsx

@@ -14,6 +14,10 @@ let selectedListID = "";
 export default function CalenderView(p) {
     const [t, setT] = useState(false)
 
+    useEffect(() => {
+        window.addEventListener("contextmenu", (e) => (e.preventDefault()))
+    })
+
     function mouse_move(e) {
         if (mouseDown) {
             let y_window = e.clientY;
@@ -22,7 +26,10 @@ export default function CalenderView(p) {
             let row = Math.floor((y_window - y_target_offset) / 10) + 1
 
             if (grabbed != null) {
+
+                if (row >= 0 && row <= 96) {
                     if (grabbedUp) {
+
                         if (row < grabbed.end_point - 1) {
                             grabbed.start_point = row;
                         }
@@ -31,6 +38,7 @@ export default function CalenderView(p) {
                             grabbed.end_point = row + 1;
                         }
                     }
+                }
             } else if (selectedElement != null) {
                 if (selectedListID !== id) {
                     let index = -1;
@@ -46,10 +54,12 @@ export default function CalenderView(p) {
                     selectedListID = id;
                 }
 
+                if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97) {
                     selectedElement.start_point = row - selectedOffsetTop;
                     selectedElement.end_point = row + selectedOffsetBottom;
                 }
             }
+        }
 
         setT(!t);
     }
@@ -73,12 +83,41 @@ export default function CalenderView(p) {
 
     function mouse_down(e) {
 
-        mouseDown = true;
         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 (e.button === 2) {
+
+            let current = null;
+            for (let i = 0; i < current_list.length; i++) {
+                current = current_list[i];
+                if (current.start_point <= row && current.end_point >= row) {
+                    break;
+                }
+                current = null;
+            }
+
+            if(current != null)
+            {
+                let temp = []
+                for(let i = 0; i < current_list.length; i++)
+                {
+                    if(current_list[i] !== current)
+                    {
+                        temp.push(current_list[i]);
+                    }
+                }
+
+                entries[e.currentTarget.id] = temp;
+            }
+
+        } else {
+
+
+            mouseDown = true;
+
             if (e.target.id === "grab") {
                 let entry = e.target.parentElement;
                 let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
@@ -132,6 +171,7 @@ export default function CalenderView(p) {
                 }
             }
         }
+    }
 
     function internal_to_time(internal) {
         internal -= 1
@@ -144,7 +184,7 @@ export default function CalenderView(p) {
     }
 
     return (
-        <div>
+        <div id={t}>
             <div className={"wochen-tag-container"}>
                 <div className={"wochen-tag font-small"}>Montag</div>
                 <div className={"wochen-tag font-small"}>Dienstag</div>
@@ -153,7 +193,7 @@ export default function CalenderView(p) {
                 <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-container"}>
                 <div className={"calender-view"}>
                     <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
                          id={"mo"}>

anwendung/src/styles/globals.css

@@ -252,7 +252,7 @@ Calender View
 
 .entry
 {
-  background-color: #dc910b;
+  background-color: #f80000;
   border-radius: 5px;
   display: flex;
   flex-direction: column;