#54 начал реализацию изменения размера

planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js

@@ -149,9 +149,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
               const boxes = getBoxesInLine(line)
               return(
               <Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
-                {boxes.map((box)=>{
+                {boxes.map((box, i)=>{
                   if (box.task) {
-                    return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
+                    return (<Grid 
+                      key={box.task.id} 
+                      item xs={box.xs} 
+                      sx={{height: '35px', marginBottom: '5px', display: 'flex', justifyContent: 'flex-start'}}
+                      >
                       <CalendarTask
                        task={box.task}
                        setCurrentTask={setCurrentTask} 
@@ -159,7 +163,7 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                        />
                     </Grid>)
                   } else {
-                    return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+                    return (<Grid key={i} item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
                       
                     </Grid>)
                   }

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.css

+.resizeable {
+  border: 2px solid #533535;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 15px;
+  min-height: 15px;
+}
+
+.resizer {
+  position: absolute;
+  background: black;
+}
+
+.resizer-r {
+  cursor: col-resize;
+  height: 100%;
+  right: 0;
+  top: 0;
+  width: 5px;
+}
+
+.resizer-l {
+  cursor: col-resize;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 5px;
+}
\ No newline at end of file

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js

 import { Grid} from "@mui/material";
-import React, { memo} from "react";
-
+import React, { memo, useEffect, useRef} from "react";
 
 
 const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
+  
+  const ref = useRef(null);
+  const refLeft = useRef(null);
+  const refRight = useRef(null);
+
+  useEffect(() => {
+    const resizeableEle = ref.current;
+    const styles = window.getComputedStyle(resizeableEle);
+    let width = parseInt(styles.width, 10);
+    let x = 0;
+
+    // Right resize
+    const onMouseMoveRightResize = (event) => {
+      const dx = event.clientX - x;
+      x = event.clientX;
+      width = width + dx;
+      resizeableEle.style.width = `${width}px`;
+    };
+
+    const onMouseUpRightResize = (event) => {
+      document.removeEventListener("mousemove", onMouseMoveRightResize);
+    };
+
+    const onMouseDownRightResize = (event) => {
+      x = event.clientX;
+      resizeableEle.style.left = styles.left;
+      resizeableEle.style.right = null;
+      document.addEventListener("mousemove", onMouseMoveRightResize);
+      document.addEventListener("mouseup", onMouseUpRightResize);
+    };
+
+    // Left resize
+    const onMouseMoveLeftResize = (event) => {
+      const dx = event.clientX - x;
+      x = event.clientX;
+      width = width - dx;
+      resizeableEle.style.width = `${width}px`;
+    };
 
+    const onMouseUpLeftResize = (event) => {
+      document.removeEventListener("mousemove", onMouseMoveLeftResize);
+    };
+
+    const onMouseDownLeftResize = (event) => {
+      x = event.clientX;
+      resizeableEle.style.right = styles.right;
+      resizeableEle.style.left = null;
+      document.addEventListener("mousemove", onMouseMoveLeftResize);
+      document.addEventListener("mouseup", onMouseUpLeftResize);
+    };
+
+    // Add mouse down event listener
+    const resizerRight = refRight.current;
+    resizerRight.addEventListener("mousedown", onMouseDownRightResize);
+    const resizerLeft = refLeft.current;
+    resizerLeft.addEventListener("mousedown", onMouseDownLeftResize);
+
+    return () => {
+      resizerRight.removeEventListener("mousedown", onMouseDownRightResize);
+      resizerLeft.removeEventListener("mousedown", onMouseDownLeftResize);
+    };
+  }, []);
 
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation(); 
     setCurrentTask(task); 
     handleOpen(e)
   }
+  
+
+
 
   return (<> 
-    <Grid  
-          sx={{ position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
-          onClick={(e)=>{onClickTaskHandler(e, task)}}
-      >
-      <span>
-        {task.title}
-      </span>
-    </Grid>
+      <Grid  ref={ref}
+            sx={{flexBasis: '100%', position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', paddingLeft: '5px', zIndex: '5', justifyContent: 'space-between'}} 
+            onClick={(e)=>{onClickTaskHandler(e, task)}}
+        >
+        <div ref={refLeft} style={{cursor: 'col-resize',height: '100%', left: '0',top: '0', width: '5px', backgroundColor: 'grey'}}></div>
+          <span>
+            {task.title}
+          </span>
+        <div ref={refRight} 
+        style={{cursor: 'col-resize',height: '100%', right: '0',top: '0', width: '5px', backgroundColor: 'grey'}}></div>
+      </Grid>
   </>)
 };