#111 Вывел задачу через абсолюты

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js

+import { useMemo } from "react";
+import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
+import CalendarStandartCell from "../../../CalendarStandartCell/CalendarStandartCell";
+import { useEffect, useRef, useState } from "react";
+import { Grid } from "@mui/material";
+
+
+
+function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat }) {
+  const [columnDayHeight, setColumnDayHeight] = useState(0)
+
+  const dayColumnRef = useRef('')
+  useEffect(() => {
+    setColumnDayHeight(prev => dayColumnRef.current.offsetHeight)
+  }, [hourFormat])
+
+  const hours = useMemo(() => {
+    return getHoursInDayNumbers(hoursInDay)
+  }, [hoursInDay])
+
+  const taskStyle = {
+    backgroundColor: 'red',
+    height: `${columnDayHeight / hours.length}px`,
+    width: '96%',
+    margin: '0 auto',
+    position: 'absolute',
+    bottom: 0,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    left: '0',
+    right: '0',
+  }
+
+  const availableTasks = useMemo(() => {
+    return getAvailableTasks(tasks, year, month, day)
+  }, [tasks, month, year, day])
+
+  const sortedTasks = useMemo(() => {
+    return getSortedTasks(availableTasks)
+  }, [availableTasks])
+
+  console.log(columnDayHeight)
+
+  const linesInDay = useMemo(() => {
+    return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
+  }, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
+
+  const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
+    if (line) {
+      let xs = 12/hoursInDay.length
+      const boxes = []
+      for (let i = 0; i < line.length; i++) {
+        if (!isNaN(line[i])) {
+        } else {
+          const task = sortedTasks[line[i].split('-')[1]]
+          const taskIsThere = boxes.find((taskFind)=>{
+            if (taskFind?.task?.id === task.id) return taskFind
+            return false
+          })
+          const step = columnDayHeight / hours.length
+          if (taskIsThere) {
+            taskIsThere.lastHour = i
+            taskIsThere.height += step
+          } else {
+            boxes.push({
+              top: step * i, 
+              height: step,
+              firstHour: i,
+              lastHour: i,
+              task: sortedTasks[line[i].split('-')[1]]})
+          }
+        }
+      }
+      return boxes
+    }
+  }
+  console.log(getBoxesInLine(linesInDay[0], hoursInDay, sortedTasks))
+  return (<>
+    <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative' }}>
+      {getBoxesInLine(linesInDay[0], hoursInDay, sortedTasks)?.map((task)=>{
+        return (
+        <div style={{
+          backgroundColor: 'red',
+          height: `${task.height}px`,
+          width: '96%',
+          margin: '0 auto',
+          position: 'absolute',
+          top: task.top,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          left: '0',
+          right: '0',
+        }}>
+
+        </div>)
+      })}
+      {hoursInDay?.map((hour, i) => {
+        return (
+          <CalendarStandartCell key={i} week={true}>
+          </CalendarStandartCell>
+        )
+      })}
+    </Grid>
+
+  </>);
+}
+
+export default CalendarColumnDayWeek;
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarRowDayWeek/CalendarRowDayWeek.js

-import { useMemo } from "react";
-import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
-import CalendarStandartCell from "../../../CalendarStandartCell/CalendarStandartCell";
-
-function CalendarRowDayWeek({ hoursInDay, tasks, month, year, day, hourFormat }) {
-  const hours = useMemo(() => {
-    return getHoursInDayNumbers(hoursInDay)
-  }, [hoursInDay])
-
-  const availableTasks = useMemo(() => {
-    return getAvailableTasks(tasks, year, month, day)
-  }, [tasks, month, year, day])
-
-  const sortedTasks = useMemo(() => {
-    return getSortedTasks(availableTasks)
-  }, [availableTasks])
-
-  const linesInDay = useMemo(() => {
-    return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
-  }, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
-
-  return (<>
-    {hoursInDay?.map((hour, i) => {
-      return (
-        <CalendarStandartCell key={i} week={true}>
-
-        </CalendarStandartCell>)
-    })}
-
-  </>);
-}
-
-export default CalendarRowDayWeek;
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody.js

@@ -3,11 +3,12 @@ import { Box } from "@mui/system";
 import CalendarRow from "../../CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
-import CalendarRowDayWeek from "./CalendarRowDayWeek/CalendarRowDayWeek";
+import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
 import { getCurrentWeekDayString } from "./Helpers";
 
 function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks }) {
 
+
   return (
     <>
       <Box style={{ marginBottom: '30px' }}>
@@ -47,8 +48,8 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
               <CalendarRow week={true}>
                 {week?.map((weekDay, i) => {
                   return (
-                    <Grid item key={i} xs={12 / week.length}>
-                      <CalendarRowDayWeek
+                      <CalendarColumnDayWeek
+                        key={i}
                         hoursInDay={hoursInDay}
                         tasks={tasks}
                         month={date.month}
@@ -56,7 +57,6 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
                         day={weekDay}
                         hourFormat={hourFormat}
                       />
-                    </Grid>
                   )
                 })}
               </CalendarRow>

planner-front/src/components/UI/ModalTask/ModalTask.js

@@ -23,7 +23,6 @@ export default function ModalTask({modal, handleClose, children}) {
       window.removeEventListener('resize', detectSize)
     }
   }, [windowDimenion])
-  const modalRef = useRef('')
 
 
   const getYCordinatesToModal = () => {
@@ -63,7 +62,7 @@ export default function ModalTask({modal, handleClose, children}) {
         aria-describedby="modal-modal-description"
         BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
       >
-        <Box sx={style} ref={modalRef}>
+        <Box sx={style}>
           {children}
         </Box>
       </Modal>