Merge branch 'task-131-enhance/new_render_monthly_calendar' into 'development'

Task 131 enhance/new render monthly calendar

See merge request !104

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

 import { Grid } from "@mui/material";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
 import CalendarStandartCell from "../../../UI/CalendarStandartCell/CalendarStandartCell";
 import CalendarTask from "../CalendarTask/CalendarTask";
-import EmptyBox from "./EmptyBox/EmptyBox";
-import { getBoxesInLine } from "./Helpers";
+import { getTasksWithInfoForPosition } from "./Helpers";
 
-const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
+const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
+
+  const [rowDaySize, setRowDaySize] = useState({ width: 0, height: 0 })
+  const dayRowRef = useRef('')
+  useEffect(() => {
+    setRowDaySize(prev => { return { height: dayRowRef.current.offsetHeight, width: dayRowRef.current.offsetWidth } })
+  }, [hourFormat])
 
   const hours = useMemo(() => {
     return getHoursInDayNumbers(hoursInDay)
@@ -31,7 +36,35 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
       xs={10.8}
       align='center'
       sx={{ position: 'relative' }}
+      ref={dayRowRef}
     >
+      {linesInDay?.map((line, i) => {
+        const tasks = getTasksWithInfoForPosition(line, hoursInDay, sortedTasks, i, rowDaySize.width)
+        return (<>
+          {tasks.map((task) => {
+            const step = rowDaySize.width / hoursInDay.length
+            return (
+              <CalendarTask
+                key={task.task.id}
+                width={task.width}
+                left={task.left}
+                task={task.task}
+                top={task.top}
+                handleOpen={handleOpen}
+                setCurrentTask={setCurrentTask}
+                modal={modal}
+                month={month}
+                setCopyTask={setCopyTask}
+                dragTaskHandler={dragTaskHandler}
+                hourFormat={hourFormat}
+                step={step}
+              >
+              </CalendarTask>
+            )
+          })}
+        </>)
+
+      })}
       {hoursInDay.map((hour, i) => {
         return (
           <CalendarStandartCell
@@ -45,79 +78,16 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
             currentTask={currentTask}
             handleOpen={handleOpen}
             modal={modal}
-          >
-          </CalendarStandartCell>
-        )
-      })}
-      <Grid sx={{ position: 'absolute', top: '0' }} container item xs={12}>
-        {linesInDay?.map((line, i) => {
-          const boxes = getBoxesInLine(line, hoursInDay, sortedTasks)
-          return (
-            <Grid key={i} container sx={{ height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px' }}>
-              {boxes.map((box, index) => {
-                if (box.task) {
-                  return (<Grid
-                    item xs={box.xs}
-                    key={box.task.id}
-                    sx={{ height: '35px', marginBottom: '5px' }}
-                  >
-                    <CalendarTask
-                      dragTaskHandler={dragTaskHandler}
-                      setCurrentLine={() => { setCurrentLine(day.dayNumber) }}
-                      currentTask={currentTask}
-                      currentLine={currentLine}
-                      hour={parseInt(hours[index])}
-                      line={day.dayNumber}
-                      task={box.task}
-                      setCurrentTask={setCurrentTask}
-                      handleOpen={handleOpen}
-                      setCopyTask={setCopyTask}
-                    />
-                  </Grid>)
-                } else {
-                  return (<EmptyBox
-                    key={index}
-                    modal={modal}
-                    dayNumber={day.dayNumber}
-                    hourNumber={box.hour}
-                    handleOpen={handleOpen}
-                    dragTaskHandler={dragTaskHandler}
-                    createCopyTask={createCopyTask}
             copyTask={copyTask}
-                    createTaskInCellHandler={createTaskInCellHandler}
-                    xs={box.xs}
-                  >
-                  </EmptyBox>)
-                }
-              })}
-            </Grid>)
-        })}
-      </Grid>
-
-      <Grid container sx={{ height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px', position: 'absolute', bottom: '0' }}>
-        {hoursInDay.map((hour, i) => {
-          const hourNumber = parseInt(hour)
-          return (<EmptyBox
-            key={i}
-            modal={modal}
-            dayNumber={day.dayNumber}
-            hourNumber={hourNumber}
-            handleOpen={handleOpen}
-            dragTaskHandler={dragTaskHandler}
             createCopyTask={createCopyTask}
-            copyTask={copyTask}
-            createTaskInCellHandler={createTaskInCellHandler}
-            xs={xs}
+            month={month}
           >
-          </EmptyBox>)
+          </CalendarStandartCell>
+        )
       })}
     </Grid>
-    </Grid>
   </>
 };
 
-export default memo(CalendarRowDay, (prevProps, nextProps) => {
-  if (!prevProps.modal) return false
-  if (nextProps.modal) return true
-});
+export default memo(CalendarRowDay);
 

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/CalendarRowDay/EmptyBox/EmptyBox.js

-import { Grid } from "@mui/material";
-import React, { memo, useEffect, useState } from "react";
-import DefaultTask from "../../../../UI/DefaultTask/DefaultTask";
-
-const EmptyBox = ({ hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask }) => {
-
-  const [isThisCell, setIsThisCell] = useState(false)
-  useEffect(() => {
-    if (!modal) {
-      setIsThisCell(false);
-    }
-  }, [modal])
-
-  const onClickHandler = (e, dayNumber, hour) => {
-    if (copyTask) {
-      createCopyTask(dayNumber, hour)
-    } else {
-      createTaskInCellHandler(dayNumber, hour);
-      setIsThisCell(true);
-      handleOpen(e)
-    }
-  }
-  const dragOverHandler = (e) => {
-    e.preventDefault();
-  }
-
-  const dropHandler = (e) => {
-    e.stopPropagation()
-    e.preventDefault();
-    dragTaskHandler(dayNumber, hourNumber)
-  }
-
-  return (<Grid
-    onDragOver={(e) => { dragOverHandler(e) }}
-    onDrop={(e) => { dropHandler(e) }}
-    onClick={(e) => { onClickHandler(e, dayNumber, hourNumber) }}
-    className='test_empty_box'
-    item xs={xs} sx={{
-      height: '40px',
-      backgroundColor: 'rgb(0,0,0,0)',
-      zIndex: '6',
-      cursor: copyTask ? 'pointer' : 'default'
-    }}>
-    {isThisCell ?
-      <DefaultTask /> : ' '}
-  </Grid>)
-};
-
-export default memo(EmptyBox, (prevProps, nextProps) => {
-  if (!prevProps.modal) return false
-  if (nextProps.modal) return true
-});
\ No newline at end of file

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/CalendarRowDay/Helpers.js

-export const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
+export const getTasksWithInfoForPosition = (line, hoursInDay, sortedTasks, index, rowDayWidth) => {
+  const widthStep = rowDayWidth / hoursInDay.length
   if (line) {
-    let xs = 12/hoursInDay.length
-    const boxes = []
+    const tasks = []
     for (let i = 0; i < line.length; i++) {
       if (!isNaN(line[i])) {
-        // if (boxes[boxes.length -1]?.task === null) {
-        //   boxes[boxes.length -1].xs += xs
-        // } else {
-        boxes.push({xs: xs, task: null, hour: line[i]})
-        //  }
       } else {
         const task = sortedTasks[line[i].split('-')[1]]
-        const taskIsThere = boxes.find((taskFind)=>{
+        const taskIsThere = tasks.find((taskFind) => {
           if (taskFind?.task?.id === task.id) return taskFind
           return false
         })
-        if (taskIsThere) {
-          taskIsThere.xs +=xs
+
+        if (!taskIsThere) {
+          tasks.push({
+            width: widthStep,
+            top: index * 40,
+            left: i * widthStep,
+            task: sortedTasks[line[i].split('-')[1]]
+          })
         } else {
-          boxes.push({
-            xs: xs, 
-            task: sortedTasks[line[i].split('-')[1]]})
+          taskIsThere.width += widthStep
         }
       }
     }
-    return boxes
+    return tasks
   }
 }
\ No newline at end of file

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

 import { Grid } from "@mui/material";
-import React, { memo, useEffect, useState } from "react";
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import React, { memo, useCallback, useMemo } from "react";
+import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
+import CopyIcon from "../../../UI/CopyIcon/CopyIcon";
 
-const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask }) => {
+const CalendarTask = ({ setCurrentTask, handleOpen, task, setCopyTask, width, left, top, dragTaskHandler, hourFormat, step }) => {
 
-  const [color, setColor] = useState('')
-  useEffect(() => {
-    if (task.priority) {
-      if (task.priority === 'A') setColor('rgb(32, 138, 250)')
-      if (task.priority === 'B') setColor('lightgreen')
-      if (task.priority === 'C') setColor('yellow')
-    } else {
-      setColor('rgb(171, 157, 157);')
+  const color = useMemo(() => {
+    return getColorTaskByPriority(task.priority)
+  }, [task.priority])
+
+  const styles = useMemo(()=>{
+    return {
+      boxSizing: 'border-box',
+      backgroundColor: color,
+      height: `35px`,
+      width: `${width - 10}px`,
+      position: 'absolute',
+      display: 'flex',
+      left: left + 5,
+      top: top,
+      margin: '5px 5px 0 0',
+      padding: '5px',
+      textAlign: 'left',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      borderRadius: '10px',
+      alignItems: 'center',
+      zIndex: '5',
+      '&:hover': {
+        cursor: 'pointer',
+        boxShadow: 'inset 0 0 100px 100px rgba(255, 255, 255, 0.3)'
+      },
     }
-  }, [task])
+  }, [width, left, top, color])
 
-  const onClickTaskHandler = (e, task) => {
+  const onClickTaskHandler = useCallback((e, task) => {
     e.stopPropagation();
     setCurrentTask((prevState) => {
       return {
@@ -27,35 +46,58 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
       }
     });
     handleOpen(e)
-  }
+  },[handleOpen, setCurrentTask])
 
-  const dragLeaveHandler = (e) => {
+  const dragLeaveHandler =  useCallback((e) => {
     e.target.style.boxShadow = 'none'
-  }
-  const dragStartHandler = (e, line, task) => {
-    setCurrentLine()
+  },[])
+
+  const dragStartHandler =  useCallback((e, task) => {
     setCurrentTask(task);
-  }
-  const dragEndHandler = (e) => {
+  },[setCurrentTask])
+
+  const dragEndHandler =  useCallback((e) => {
     e.target.style.boxShadow = 'none'
+  },[])
+
+  const onClickCopyIconHandler =  useCallback((e) => {
+    e.stopPropagation();
+    setCopyTask(task)
+  },[task, setCopyTask])
+
+  const dragOverHandler =  useCallback((e) => {
+    e.preventDefault();
+  },[])
+
+  const dropHandler =  useCallback((e, task) => {
+    e.preventDefault();
+    let hour
+    if (hourFormat) {
+      hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetX / step) - 1)
+    } else {
+      hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetX / step) - 1 + Math.ceil(e.nativeEvent.offsetX / step) - 1)
     }
+    dragTaskHandler(task.infoForCell.startDay, hour)
+  },[dragTaskHandler, hourFormat, step])
+
 
   return (<>
     <Grid
       draggable={true}
       onDragLeave={(e) => { dragLeaveHandler(e) }}
-      onDragStart={(e) => { dragStartHandler(e, line, task) }}
+      onDragStart={(e) => { dragStartHandler(e, task) }}
       onDragEnd={(e) => { dragEndHandler(e) }}
-      sx={{ position: 'relative', height: '30px', backgroundColor: color, borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', zIndex: '5', justifyContent: 'space-between', padding: '0 15px' }}
+      onDrop={(e) => { dropHandler(e, task) }}
+      onDragOver={(e) => { dragOverHandler(e) }}
+      sx={styles}
       onClick={(e) => { onClickTaskHandler(e, task) }}
     >
       <span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
         {task.title}
       </span>
-      <ContentCopyIcon sx={{ width: '20px', cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
-      </ContentCopyIcon>
-
-
+      <CopyIcon
+        onClick={(e) => { onClickCopyIconHandler(e)}}
+      />
     </Grid>
   </>)
 };

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

@@ -11,7 +11,6 @@ import { useSelector } from "react-redux";
 
 function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {
   
-  const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
   const handleOpen = useCallback((e) => {
     setModal({
@@ -65,8 +64,6 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
               hoursInDay={hoursInDay}
               currentTask={currentTask}
               handleOpen={handleOpen}
-              currentLine={currentLine}
-              setCurrentLine={setCurrentLine}
               modal={modal.open}
               setCurrentTask={setCurrentTask}
               year={year}

planner-front/src/components/Calendars/UI/CalendarSmallCell/CalendarSmallCell.js

@@ -3,7 +3,7 @@ import { memo } from "react";
 
 const CalendarSmallCell = ({ children, xs, week }) => {
   return <>
-    <Grid align='center' item xs={xs} sx={{ borderRight: week ? null : '1px solid black', height: week ? '40px' : null, borderBottom: week ? '1px solid black' : null, }}>
+    <Grid align='center' item xs={xs} sx={{ borderRight: week ? null : '1px solid black', height: week ? '45px' : null, borderBottom: week ? '1px solid black' : null, }}>
       {children}
     </Grid>
   </>

planner-front/src/components/Calendars/UI/CalendarStandartCell/CalendarStandartCell.js

@@ -2,17 +2,19 @@ import { Grid } from "@mui/material";
 import { memo, useEffect, useState } from "react";
 import DefaultTask from "../DefaultTask/DefaultTask";
 
-
-
-
-const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month}) => {
+const heightCell = 40
+const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month, year }) => {
     const [isThisCell, setIsThisCell] = useState(false)
-
+    const [top, setTop] = useState(0)
     const cellClass = {
         position: 'relative',
-        height: linesInDay?.length ? `${40 * linesInDay.length + 35}px` : `${40}px`,
+        height: linesInDay?.length ? `${heightCell * linesInDay.length + 5}px` : `${45}px`,
         borderRight: '1px solid black',
         borderBottom: week ? '1px solid black' : null,
+        '&:hover': {
+            cursor: children ? null : '#d6d2d2',
+            background: children ? null : '#d6d2d2'
+        },
     }
 
     useEffect(() => {
@@ -23,30 +25,36 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
 
     const dragOverHandler = (e) => {
         e.preventDefault();
+        e.target.style.background = children ? null : '#d6d2d2'
+    }
+    const dragLeaveHandler = (e) => {
+        e.preventDefault();
+        e.target.style.background = null
     }
 
     const dropHandler = (e) => {
         e.stopPropagation()
         e.preventDefault();
-        dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
+        e.target.style.background = null
+        dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]), month, year)
     }
 
     const onClickHandler = (e) => {
-        if (linesInDay?.length) {
-            createTaskInCellHandler(dayNumber, hours);
-            setIsThisCell(true);
-            handleOpen(e)
+        if (!week) {
+            if (e.nativeEvent.offsetY <= 5) {
+                setTop(40 * Math.ceil((e.nativeEvent.offsetY) / 40 - 1))
+            } else {
+                setTop(40 * Math.ceil((e.nativeEvent.offsetY - 5) / 40 - 1))
+            }
         }
-        if (week) {
         if (copyTask) {
-                createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month)
+            createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month, year)
         } else {
-                createTaskInCellHandler(dayNumber, hours, month);
+            createTaskInCellHandler(dayNumber, hours, month, year);
             setIsThisCell(true);
             handleOpen(e)
         }
     }
-    }
 
     return <>
         <Grid
@@ -54,11 +62,12 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
             sx={cellClass}
             onClick={(e) => { onClickHandler(e) }}
             onDragOver={(e) => { dragOverHandler(e) }}
+            onDragLeave={(e) => { dragLeaveHandler(e) }}
             onDrop={(e) => { dropHandler(e) }}
         >
             {children}
             {isThisCell ?
-                <DefaultTask week={week} /> : null}
+                <DefaultTask week={week} top={top} /> : null}
 
         </Grid>
     </>

planner-front/src/components/Calendars/UI/CopyIcon/CopyIcon.js

+
+import React, { memo} from "react";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+const styles = { width: '20px', cursor: 'pointer', marginLeft: 'auto' }
+const CopyIcon = ({onClick}) => {
+
+  return (
+      <ContentCopyIcon sx={styles} onClick={onClick}>
+      </ContentCopyIcon>)
+};
+
+export default memo(CopyIcon);
\ No newline at end of file

planner-front/src/components/Calendars/UI/DefaultTask/DefaultTask.js

 import { Box } from "@mui/material";
 import { memo } from "react";
 
-const MonthDefaultTaskStyles = {
-  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'
-}
+
 const WeekDefaultTaskStyles = {
   boxSizing: 'border-box',
   padding: '0 5px',
@@ -31,7 +17,25 @@ const WeekDefaultTaskStyles = {
 }
 
 
-const DefaultTask = ({ week }) => {
+const DefaultTask = ({ week, top }) => {
+
+  const MonthDefaultTaskStyles = {
+    boxSizing: 'border-box',
+    position: 'relative',
+    height: '35px',
+    backgroundColor: 'lightgreen',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    borderRadius: '10px',
+    margin: '5px 3px 0 6px',
+    padding: '5px',
+    top: top,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    zIndex: '5'
+  }
 
   return (<>
     <Box

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

@@ -11,7 +11,6 @@ import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
 function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal, dragTaskHandler }) {
 
   const [columnDaySize, setColumnDaySize] = useState({ width: 0, height: 0 })
-  const [diffForDragAndDrop, setDiffForDragAndDrop] = useState(1)
 
   const dayColumnRef = useRef('')
   useEffect(() => {
@@ -81,6 +80,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             copyTask={copyTask}
             createCopyTask={createCopyTask}
             month={month}
+            year={year}
             dragTaskHandler={dragTaskHandler}
           >
           </CalendarStandartCell>

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

 import { Box } from "@mui/material"
 import { useEffect, useState, memo, useCallback, useMemo } from "react"
 import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelpers"
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CopyIcon from "../../../../UI/CopyIcon/CopyIcon";
 
 
 function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month, dragTaskHandler, step, hourFormat}) {
@@ -81,13 +81,18 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     } else {
       hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetY/step)-1 + Math.ceil(e.nativeEvent.offsetY/step)-1) 
     }
-    dragTaskHandler(task.infoForCell.startDay, hour)
+    dragTaskHandler(task.infoForCell.startDay, hour, task.infoForCell.startMonth - 1, task.infoForCell.startYear)
   }
 
   const dragLeaveHandler = (e) => {
     e.preventDefault();
-
   }
+
+  const onClickCopyIconHandler =  useCallback((e) => {
+    e.stopPropagation();
+    setCopyTask(task)
+  },[task, setCopyTask])
+
   return (
     <Box
       draggable={true}
@@ -102,8 +107,9 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
       <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
         {task.title}
       </span>
-      <ContentCopyIcon sx={{ marginLeft: 'auto', marginTop: '5px' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
-      </ContentCopyIcon>
+      <CopyIcon
+        onClick={(e) => { onClickCopyIconHandler(e)}}
+      />
     </Box>);
 }
 

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

@@ -6,17 +6,18 @@ export const getCurrentWeekDayString = (dayNumber) => {
   }
 }
 
-export const getMonthToDayColumn = (week, weekDay, month) => {
+
+export const getMonthAndYearToDayColumn = (week, weekDay, month, year) => {
   if (week[0] > week[6]) {
     if (weekDay < week[0]) {
-      if (month === 11) {
-        return 0
-      }
-      return month + 1
+      return {month: month, year: year}
     } else {
-      return month
+      if (month === 0) {
+        return {month: 11, year: year - 1}
+      }
+      return {month: month - 1, year: year}
     }
   } else {
-    return month
+    return {month: month, year: year}
   }
 }

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

@@ -8,7 +8,7 @@ import CalendarSmallCell from "../../UI/CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../UI/CalendarStandartCell/CalendarStandartCell";
 import HourFormatSwitch from "../../UI/HourFormatSwitch/HourFormatSwitch";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
-import { getCurrentWeekDayString, getMonthToDayColumn } from "./Helpers";
+import { getCurrentWeekDayString, getMonthAndYearToDayColumn } from "./Helpers";
 
 function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask, dragTaskHandler }) {
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
@@ -66,13 +66,14 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
             <Grid item xs={11.005}>
               <CalendarRow week={true}>
                 {week?.map((weekDay, i) => {
+                  const {month, year} = getMonthAndYearToDayColumn(week, weekDay, date.month, date.year)
                   return (
                     <CalendarColumnDayWeek
                       key={i}
                       hoursInDay={hoursInDay}
                       tasks={tasks}
-                      month={getMonthToDayColumn(week, weekDay, date.month)}
-                      year={date.year}
+                      month={month}
+                      year={year}
                       day={weekDay}
                       hourFormat={hourFormat}
                       setCurrentTask={setCurrentTask}

planner-front/src/containers/WeekCalendar/WeekCalendar.js

@@ -136,7 +136,7 @@ function WeekCalendar() {
     setWorkerInfo({ project: '', worker: '' })
   }, [workerInfo?.worker?.user?.id])
 
-  const createTaskInCellHandler = useCallback((dayNumber, dayHour, month) => {
+  const createTaskInCellHandler = useCallback((dayNumber, dayHour, month, year) => {
     let hour
     if (!isNaN(dayHour)) {
       hour = dayHour
@@ -153,26 +153,28 @@ function WeekCalendar() {
       title: "Задача",
       description: "описание",
       priority: null,
-      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0)),
-      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hourDue, 59)),
+      dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
       infoForCell: {
         startHour: hour,
         endHour: hourDue,
         startDay: dayNumber,
-        month: month
+        month: month,
+        year: year,
       },
       project: allUserProjects[0]?.id
     }
     setCurrentTask((newTask))
-  }, [dateNow.year, hourFormat, allUserProjects])
+  }, [hourFormat, allUserProjects])
 
   const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour
     const timeStartHour = currentTask.infoForCell.startHour
     const month = currentTask.infoForCell.month
     const day = currentTask.infoForCell.startDay
-    const due = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeEndHour - 1, 59))
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeStartHour, 0))
+    const year = currentTask.infoForCell.startYear
+    const due = dateToISOLikeButLocal(new Date(year, month, day, timeEndHour - 1, 59))
+    const start = dateToISOLikeButLocal(new Date(year, month, day, timeStartHour, 0))
     if (currentTask.id) {
       const newTask = {
         ...currentTask,
@@ -195,18 +197,18 @@ function WeekCalendar() {
       delete newTask.id
       await dispatch(addCalendarTask(newTask, userId))
     }
-  }, [currentTask, dateNow.year, dispatch, user.id, userId])
+  }, [currentTask, dispatch, user.id, userId])
 
-  const createCopyTask = useCallback(async (dayNumber, hour, month) => {
+  const createCopyTask = useCallback(async (dayNumber, hour, month, year) => {
     const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
     const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
     let due
     if (hour + hourDiff >= lastHour) {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, lastHour, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, lastHour, 59))
     } else {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour + hourDiff, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
     }
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0))
+    const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
     const newTask = {
       ...copyTask,
       dateTimeStart: start,
@@ -217,18 +219,18 @@ function WeekCalendar() {
     delete newTask.id
     await dispatch(addCopyCalendarTask(newTask, userId))
     setCopyTask(null)
-  }, [copyTask, dateNow.year, dispatch, hoursInDay, userId])
+  }, [copyTask, dispatch, hoursInDay, userId])
 
-  const dragTaskHandler = useCallback(async (dayNumber, hour) => {
+  const dragTaskHandler = useCallback(async (dayNumber, hour, month, year) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
     const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
     let due
     if (hour + hourDiff >= lastHour) {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, lastHour, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, lastHour, 59))
     } else {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
     }
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0))
+    const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
     const newTask = {
       ...currentTask,
       taskId: currentTask.mainTaskId,
@@ -239,7 +241,7 @@ function WeekCalendar() {
     delete newTask.infoForCell
     await dispatch(editCalendarTask(newTask, currentTask.id, userId))
     setCurrentTask({})
-  }, [currentTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
+  }, [currentTask, dispatch, hoursInDay, userId])
 
   const deleteTaskHandler = useCallback(async (taskId) => {
     dispatch(deleteCalendarTask(taskId, userId))
@@ -259,8 +261,6 @@ function WeekCalendar() {
     }
   }, [dispatch, user.id, userId])
 
-  console.log(project)
-
   return (
     <>
       <DefaultModal