#111 Чуть исправил логику, реализовал создание задачи

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

 import { Grid } from "@mui/material";
 import { memo, useEffect, useState } from "react";
-import DefaultTask from "../MonthCalendar/MonthCalendarBody/DefaultTask/DefaultTask";
+import DefaultTask from "../DefaultTask/DefaultTask";
 
 
 
@@ -36,6 +36,11 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
             setIsThisCell(true);
             handleOpen(e)
         }
+        if (week) {
+            createTaskInCellHandler(dayNumber, hours);
+            setIsThisCell(true);
+            handleOpen(e)
+        }
     }
 
     return <>
@@ -48,7 +53,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
         >
             {children}
             {isThisCell ?
-                <DefaultTask /> : null}
+                <DefaultTask week={week}/> : null}
 
         </Grid>
     </>

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

 import { Box } from "@mui/material";
 import { memo } from "react";
 
-const DefaultTaskStyles = {
+const MonthDefaultTaskStyles = {
   position: 'relative',
   height: '30px',
   backgroundColor: 'lightgreen',
@@ -16,12 +16,26 @@ const DefaultTaskStyles = {
   paddingLeft: '5px',
   zIndex: '5'
 }
+const WeekDefaultTaskStyles = {
+  boxSizing: 'border-box',
+  padding: '0 5px',
+  borderRadius: '2px',
+  border: '1px solid white',
+  backgroundColor:'lightgreen',
+  height: `100%`,
+  width: `100%`,
+  zIndex: 5,
+  textAlign: 'left',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+}
+
 
-const DefaultTask = ({ }) => {
+const DefaultTask = ({ week }) => {
 
   return (<>
     <Box
-      sx={DefaultTaskStyles}
+      sx={week ? WeekDefaultTaskStyles : MonthDefaultTaskStyles}
     >
       <span>
         Задача

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 "../../DefaultTask/DefaultTask";
+import DefaultTask from "../../../../DefaultTask/DefaultTask";
 
 const EmptyBox = ({ hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask }) => {
 

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

@@ -7,7 +7,7 @@ import CalendarWeekTask from "./CalendarWeekTask/CalendarWeekTask";
 
 
 
-function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask }) {
+function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, createCopyTask, createTaskInCellHandler, modal }) {
   const [columnDayHeight, setColumnDayHeight] = useState(0)
 
   const dayColumnRef = useRef('')
@@ -34,7 +34,6 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
 
   const getBoxesInLine = (line, hoursInDay, sortedTasks, linesInDay) => {
     if (line) {
-      let xs = 12 / hoursInDay.length
       const boxes = []
       for (let i = 0; i < line.length; i++) {
         if (!isNaN(line[i])) {
@@ -48,13 +47,22 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
           if (taskIsThere) {
             taskIsThere.lastHour = i
             taskIsThere.height += step
+            let tasksInHour = 0
+            for (let line of linesInDay) {
+              if (isNaN(line[i])) {
+                tasksInHour++
+              }
+            }
+            if (tasksInHour > taskIsThere.tasksInHour) {
+              taskIsThere.tasksInHour = tasksInHour
+            }
           } else {
             let tasksInHour = 0
             for (let line of linesInDay) {
-                if (isNaN(line[i])) {
-                  tasksInHour++
-                }
-            } 
+              if (isNaN(line[i])) {
+                tasksInHour++
+              }
+            }
             boxes.push({
               tasksInHour: tasksInHour,
               top: step * i,
@@ -70,18 +78,18 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
     }
   }
 
-  
   return (<>
-    <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative'}}>
+    <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative' }}>
       {linesInDay?.map((line, i) => {
         const boxes = getBoxesInLine(line, hoursInDay, sortedTasks, linesInDay)
         return (<>
           {boxes.map((task, index) => {
+
             const amount = task.tasksInHour
             const oneTaskPrecentWidth = 100 / amount
-            const left = oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100 * i
-            const oneTaskWidth = dayColumnRef.current.offsetWidth - (oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100) * i
+            const left = oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100 * i 
             const zIndex = 10 + i
+            const oneTaskWidth = dayColumnRef.current.offsetWidth - (oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100) * i
             return (
               <CalendarWeekTask
                 key={index}
@@ -91,21 +99,30 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
                 task={task.task}
                 top={task.top}
                 zIndex={zIndex}
-                handleOpen={handleOpen} 
+                handleOpen={handleOpen}
                 setCurrentTask={setCurrentTask}
+                modal={modal}
               >
 
               </CalendarWeekTask>
-              
 
-              )
+
+            )
           })}
         </>)
 
       })}
       {hoursInDay?.map((hour, i) => {
         return (
-          <CalendarStandartCell key={i} week={true}>
+          <CalendarStandartCell
+            key={i}
+            week={true}
+            createTaskInCellHandler={createTaskInCellHandler}
+            handleOpen={handleOpen}
+            dayNumber={day}
+            hours={hour}
+            modal={modal}
+          >
           </CalendarStandartCell>
         )
       })}

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

@@ -2,8 +2,8 @@ import { Box } from "@mui/material"
 import { useEffect, useState } from "react"
 
 
-function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask}) {
-
+function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal}) {
+  const [zIndexStyle, setZIndexStyle] = useState(10)
   const [color, setColor] = useState('')
   useEffect(() => {
     if (task.priority) {
@@ -13,8 +13,15 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     } else {
       setColor('rgb(171, 157, 157);')
     }
+    setZIndexStyle(zIndex)
   }, [task])
 
+  useEffect(() => {
+    if (!modal) {
+      setZIndexStyle(zIndex)
+    }
+  }, [modal])
+
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation();
     setCurrentTask((prevState) => {
@@ -26,19 +33,21 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
         }
       }
     });
+    setZIndexStyle(100)
     handleOpen(e)
   }
 
   const styles = {
-    borderRadius: '5px',
+    boxSizing: 'border-box',
+    borderRadius: '3px',
     border: '1px solid white',
     backgroundColor: color,
-    height: `${height}px`,
-    width: `${width}px`,
+    height: `${height - 1}px`,
+    width: `${width - 1}px`,
     position: 'absolute',
-    left: `${left}px`,
+    left: left,
     top: top,
-    zIndex: zIndex,
+    zIndex: zIndexStyle,
     textAlign: 'left',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -46,9 +55,6 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
       cursor: 'pointer',
       boxShadow: 'inset 0 0 100px 100px rgba(255, 255, 255, 0.3)'
     },
-    "&:active": {
-      zIndex: 100
-    }
   }
 
   return (

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

@@ -9,7 +9,7 @@ import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCel
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
 import { getCurrentWeekDayString } from "./Helpers";
 
-function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler }) {
+function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler }) {
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
   const handleOpen = (e) => {
     setModal({
@@ -28,7 +28,6 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
     setCurrentTask({})
   };
 
-
   return (
     <>
       <Box style={{ marginBottom: '30px' }}>
@@ -78,6 +77,8 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
                       hourFormat={hourFormat}
                       setCurrentTask={setCurrentTask}
                       handleOpen={handleOpen}
+                      createTaskInCellHandler={createTaskInCellHandler}
+                      modal={modal.open}
                     />
                   )
                 })}

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

@@ -79,6 +79,34 @@ function WeekCalendar() {
     }
   }, []);
 
+  const createTaskInCellHandler = (dayNumber, dayHour) => {
+    let hour
+    if (!isNaN(dayHour)) {
+      hour = dayHour
+    } else {
+      hour = parseInt(dayHour.split(':')[0])
+    }
+    let hourDue
+    if (hourFormat) {
+      hourDue = hour + 1
+    } else {
+      hourDue = hour + 2
+    }
+    const newTask = {
+      title: "Задача",
+      description: "описание",
+      priority: null,
+      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
+      infoForCell: {
+        startHour: hour,
+        endHour: hourDue,
+        startDay: dayNumber
+      }
+    }
+    setCurrentTask((newTask))
+  }
+
   const sendNewTaskHandler = async () => {
     const timeEndHour = currentTask.infoForCell.endHour
     const timeStartHour = currentTask.infoForCell.startHour
@@ -132,6 +160,7 @@ function WeekCalendar() {
         hourFormat={hourFormat}
         setHourFormat={setHourFormat}
         hoursInDay={hoursInDay}
+        createTaskInCellHandler={createTaskInCellHandler}
       />
     </>
   );