#38 Получилось отобразить задачи в часовом формате без нюансов

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

 import { Grid, TextField, Typography } from "@mui/material";
 import React, { memo, useState, useEffect} from "react";
 
+
+const TaskDefault = ({task, onClickTaskHandler}) => {
+  return(<Grid  
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin:"5px 10px"}} 
+        onClick={onClickTaskHandler}
+        >
+          <span>
+            {task.title}
+          </span>
+    </Grid>)
+}
+
+const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
+  return(<Grid
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}} 
+        onClick={onClickTaskHandler}
+        >
+          <span>
+            {task.title}
+          </span>
+    </Grid>)
+}
+const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
+  return(<Grid  
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}} 
+        onClick={onClickTaskHandler}
+        >
+          <span>
+            	&#8291;
+          </span>
+    </Grid>)
+}
+const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
+  return(<Grid  
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}} 
+        onClick={onClickTaskHandler}
+        >
+          <span>
+            	&#8291;
+          </span>
+    </Grid>)
+}
+
+
+
+
 const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
+
   const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
+  const hour = parseInt(hours.split(':')[0])
   const getTaskInDayCell = (tasks, day, hours) => {
-    const hour = parseInt(hours.split(':')[0])
     let hourDiffEnd
     if (hourFormat) {
       hourDiffEnd = hour + 1
@@ -24,8 +71,14 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
       }      
     }
     })
+    tasksCell.sort(function(a,b){
+      const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
+      const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
+      return durattionSecondDate - durattionFirstDate;
+    });
     return tasksCell
   }
+
   const tasksCell = getTaskInDayCell(tasks, day, hours)
 
   useEffect(()=>{
@@ -34,19 +87,51 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
     }
   }, [currentTask])
 
+  const onClickTaskHandler = (e, task) => {
+    e.stopPropagation(); 
+    setCurrentTask(task); 
+    handleOpen(e)
+  }
+
 
   return (<> 
       {tasksCell.length ? tasksCell.map((task, i)=>
       {
-      return (
-      <Grid  
-        key={task.id} 
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51);;'}} 
-        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
-        >
-          {task.title}
-      </Grid>
-      )}
+
+        if (task.infoForCell.endHour > hour && task.infoForCell.startHour === hour && hourFormat) {
+          return (
+            <TaskWithNoStartAndAllEnd
+              key={task.id}
+              task={task}
+              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+            />
+          )
+        }
+        if (task.infoForCell.startHour < hour && task.infoForCell.endHour > hour) {
+          return (
+            <TaskWithAllStartAndAllEnd
+              key={task.id}
+              task={task}
+              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+            />
+          )
+        }
+        if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
+          return (
+            <TaskWithAllStartAndNoEnd
+              key={task.id}
+              task={task}
+              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+            />
+          )
+        }
+        return (
+          <TaskDefault
+            key={task.id}
+            task={task}
+            onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+          />
+        )}
       ) 
       : null}
   </>)