#55 Реализовал полностью логику отображения

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

@@ -130,12 +130,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
         align='center'
         >
           {hoursInDay.map((hour, i)=>{
-            const linesForCell = []
-            if (linesInDay?.length) {
-              for (let j = 0; j < linesInDay.length; j++) {
-                linesForCell.push(linesInDay[j][i])
-              }
-            }
             return (
               <CalendarStandartCell
                 key={i} 
@@ -147,29 +141,27 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                 handleOpen={handleOpen}
                 modal={modal}
                 >
-                  {/* <CalendarTask
-                    setCurrentTask={setCurrentTask}
-                    hours={hour}
-                    modal={modal}
-                    hourFormat={hourFormat}
-                    handleOpen={handleOpen}
-                    currentTask={currentTask}
-                    linesForCell={linesForCell.length ? linesForCell : null}
-                    sortedTasks={sortedTasks}
-                  />                */}
               </CalendarStandartCell>
               ) 
             })}
 
-            {linesInDay?.map((line)=>{
+            {linesInDay?.map((line, i)=>{
               const boxes = getBoxesInLine(line)
               return(
-              <Grid container sx={{backgroundColor: 'grey', height: '40px', borderBottom: '1px solid red'}}>
+              <Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
                 {boxes.map((box)=>{
                   if (box.task) {
-                    return (<Grid item xs={box.xs} sx={{backgroundColor: 'green', height: '40px'}}></Grid>)
+                    return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
+                      <CalendarTask
+                       task={box.task}
+                       setCurrentTask={setCurrentTask} 
+                       handleOpen={handleOpen}
+                       />
+                    </Grid>)
                   } else {
-                    return (<Grid item xs={box.xs} sx={{backgroundColor: 'white', height: '40px'}}></Grid>)
+                    return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+                      
+                    </Grid>)
                   }
                 })}
               </Grid>)

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

 import { Grid} from "@mui/material";
 import { memo, useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, divRef }) => {
     const [isThisCell, setIsThisCell] = useState(false)
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
         }
     }, [modal])
+
     return <>
         <Grid  
             item xs={xs} 
-            sx={{borderRight: '1px solid black'}} 
-            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
+            sx={{position: 'relative', height: '35px'}} 
+            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
+        >
             {children}
         {isThisCell ?  
         <Grid  
-            sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px 10px", borderRadius: '10px'}} 
+            sx={{ position: 'relative', height: '29px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '3px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}  
             >
             <span>
                 Задача
             </span>
         </Grid> : null}
+        <div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
+
+        </div>
         </Grid>
     </>
 };

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

@@ -2,64 +2,9 @@ import { Grid} from "@mui/material";
 import React, { memo} from "react";
 
 
-const TaskDefault = ({task, onClickTaskHandler}) => {
-  return(<Grid  
-        sx={{ height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin: '5px 10px', textAlign: 'left'}} 
-        onClick={onClickTaskHandler}
-        >
-          <span>
-            {task.title}
-          </span>
-    </Grid>)
-}
 
-const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
-  return(<Grid
-        sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative', textAlign: 'left'}} 
-        onClick={onClickTaskHandler}
-        >
-          <span>
-            {task.title}
-          </span>
-    </Grid>)
-}
-const TaskWithAllStartAndNoEnd = ({onClickTaskHandler}) => {
-  return(<Grid  
-        sx={{height: '30px',backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}} 
-        onClick={onClickTaskHandler}
-        >
-          <span>
-            	&#8291;
-          </span>
-    </Grid>)
-}
-const TaskWithAllStartAndAllEnd = ({onClickTaskHandler}) => {
-  return(<Grid  
-        sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}} 
-        onClick={onClickTaskHandler}
-        >
-          <span>
-            	&#8291;
-          </span>
-    </Grid>)
-}
+const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
 
-const Empty = () => {
-  return (<Grid  
-      sx={{height: '30px', backgroundColor: 'rgb(0,0,0,0)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px -1px"}} 
-      >
-        <span>
-            &#8291;
-        </span>
-  </Grid>)
-}
-
-
-
-
-const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTask, linesForCell, sortedTasks}) => {
-
-  const hour = parseInt(hours.split(':')[0])
 
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation(); 
@@ -68,51 +13,14 @@ const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTas
   }
 
   return (<> 
-      {linesForCell?.length ? linesForCell.map((line, i)=>
-      {
-        if (isNaN(line)) {
-          const task = sortedTasks[line.split('-')[1]]
-          if ((hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour) 
-              || (!hourFormat && (task.infoForCell.endHour - 1 > hour)
-                  && (task.infoForCell.startHour === hour || task.infoForCell.startHour === hour +1))) {
-            return (<TaskWithNoStartAndAllEnd
-                key={task.id}
-                task={task}
-                onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
-              />)
-          }
-          if ((hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour) 
-              || (!hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour + 1)) {
-            return (<TaskWithAllStartAndAllEnd
-              key={task.id}
-              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
-            />)
-          }
-          if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
-            return (
-              <TaskWithAllStartAndNoEnd
-                key={task.id}
-                onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
-              />)
-          }
-          return (
-            <TaskDefault
-              key={task.id}
-              task={task}
-              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
-            />
-          )
-        } else {
-          return (
-            <Empty
-              
-            />
-          )
-        }
-        }
-          
-      ) 
-      : null}
+    <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>
   </>)
 };
 

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

 import { FormControlLabel, Switch} from "@mui/material";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
@@ -25,10 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
     setModal({...modal, open: false})
     setCurrentTask({})
   };
-
+  const divRef = useRef(null)
+  const [divHeight, setDivHeight] = useState('')
+  useEffect(() => {
+    if (divRef) {
+        setDivHeight(()=>{
+          return divRef.current?.offsetHeight
+        })
+    }
+}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
 
   return (
-    <>
+    <div ref={divRef} style={{marginBottom: '30px'}}>
     <CalendarRow
             >
         <CalendarSmallCell xs={1.2}> 
@@ -40,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         </CalendarSmallCell>
         {hoursInDay?.map((hours, i)=>{
           return (
-            <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
+            <CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
               {hours}
             </CalendarStandartCell>
             ) 
@@ -83,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
       />
     </ModalTask>
-    </>
+    </div>
   );
 }