#29 Реализовал отображение задач на 1 и 2 часах, а так же если в одной клетке 2 задачи

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

 import { Grid, TextField } from "@mui/material";
 import { useEffect, useState } from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange}) => {
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat}) => {
 
   const getTaskInDayCell = (tasks, day, hours) => {
-    const task = tasks.find(task=> {
+    const hour = parseInt(hours.split(':')[0])
+    let hourDiffEnd
+    let hourDiffStart
+    if (hourFormat) {
+      hourDiffEnd = hour + 1
+    } else {
+      hourDiffEnd = hour + 2
+    }
+    if (hourFormat) {
+      hourDiffStart = hour - 1
+    } else {
+      hourDiffStart = hour - 2
+    }
+    const tasksCell = tasks.filter(task=> {
     if (year === task.infoForCell.startYear) {
       if (month + 1 === task.infoForCell.startMonth) {
         if (day.dayNumber === task.infoForCell.startDay) {
-          if ((task.infoForCell.endHour <= parseInt(hours.split(':')[0]) || task.infoForCell.startHour <= parseInt(hours.split(':')[0])) && (task.infoForCell.endHour > parseInt(hours.split(':')[0]))) {
-            return task
+          if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))  
+          || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hourDiffEnd)
+          || (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+              return task
           }
         }
       }      
     }
     })
-    return task
+    return tasksCell
   }
-  
-  let task = getTaskInDayCell(tasks, day, hours)
 
-  return (<> 
-      {task ? 
-      <Grid  sx={{backgroundColor: 'lightgreen'}}>
+  const tasksCell = getTaskInDayCell(tasks, day, hours)
+
+  const renderTasks = (tasksCell) => {
+    tasksCell.map((task, i)=>{
+      return (
+      <Grid  key={task.id} sx={{backgroundColor: 'lightgreen'}}>
         <TextField 
         id={task.title} 
         variant="standard" 
@@ -32,7 +48,26 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange}
         onChange={onChange}>
         </TextField>
       </Grid>
-      : null }
+      )
+    })}
+
+    console.log(tasksCell[0])
+
+  return (<> 
+      {tasksCell.length ? tasksCell.map((task, i)=>
+      {
+      return (
+      <Grid  key={task.id} sx={{backgroundColor: 'lightgreen'}}>
+        <TextField 
+        id={task.title} 
+        variant="standard" 
+        value={task.title} 
+        name='title' 
+        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
+        onChange={onChange}>
+        </TextField>
+      </Grid>)}
+      ) : null }
   </>)
 };
 

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

@@ -20,7 +20,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
 
   useEffect(()=>{
     if (hourFormat) {
-      const arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '17:00', '18:00', '19:00','20:00','21:00','22:00', '23:00', '7:00']
+      const arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00', '00:00', '7:00']
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
@@ -28,7 +28,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
       })
       setHoursInDay(()=>arr)
     } else {
-      const arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00', '7:00']
+      const arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '7:00']
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
@@ -104,6 +104,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
                       tasks={tasks}
                       day={day}
                       hours={hours}
+                      hourFormat={hourFormat}
                     />
                 </CalendarStandartCell>
                 ) 

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

@@ -66,15 +66,15 @@ function MonthCalendar() {
     const hour = parseInt(dayHour.split(':')[0])
     let hourDue
     if (hourFormat) {
-      hourDue = hour + 1
+      hourDue = hour + 0
     } else {
-      hourDue = hour + 2
+      hourDue = hour + 1
     }
     const newTask = {
       title:"Задача",
       description:"описание",
-      dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour)),
-      dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue)),
+      dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
     }
     console.log(newTask)
     dispatch(addTask(newTask))

planner-front/src/store/reducers/tasksReducer.js

@@ -22,12 +22,16 @@ const tasksReduсer = (state = initialState, action) => {
               const yearStartNumber =  parseInt(dateStart.split('-')[0])
               const timeStartHour = parseInt(timeStart.split(':')[0])
               const timeEndHour = parseInt(timeEnd.split(':')[0])
+              const timeStartMinute = parseInt(timeStart.split(':')[1])
+              const timeEndMinute = parseInt(timeEnd.split(':')[1])
               newArr.push({...task, infoForCell: { 
                 startDay: dayStart, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
                 startYear: yearStartNumber,
+                startMinute: timeStartMinute,
                 endHour: timeEndHour,
+                endMinute: timeEndMinute,
                 }
               } )
             }