#85 отобразил календарь-часы для дней недели

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

 import { Grid } from "@mui/material";
 
-const CalendarRow = ({children}) => {
+const CalendarRow = ({children, week}) => {
     return <>
         <Grid 
           container 
           align='center'
-          sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
+          sx={{borderBottom: week ? null : '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
           >
             {children}
           </Grid>

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

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

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

@@ -4,13 +4,16 @@ import DefaultTask from "../DefaultTask/DefaultTask";
 
 
 
-const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay}) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week}) => {
     const [isThisCell, setIsThisCell] = useState(false)
+
     const cellClass = {
         position: 'relative', 
         height: linesInDay?.length ? `${40*linesInDay.length+35}px` : `${40}px`,
         borderRight: '1px solid black',
+        borderBottom: week ?'1px solid black' : null,
     }
+
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
@@ -27,7 +30,7 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCell
         dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
     }
     const onClickHandler = (e) => {
-        if (!linesInDay?.length) {
+        if (linesInDay?.length) {
             createTaskInCellHandler(dayNumber, hours); 
             setIsThisCell(true); 
             handleOpen(e)

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

-import { FormControlLabel, Switch } from "@mui/material";
+import { FormControlLabel, Grid, Switch } from "@mui/material";
 import { Box } from "@mui/system";
 import CalendarRow from "../../MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../MonthCalendar/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell";
 import { getCurrentWeekDayString } from "./Helpers";
 
-function WeekCalendarBody({week, date, hourFormat, setHourFormat}) {
+function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat}) {
   
   return (
     <>
@@ -30,8 +30,35 @@ function WeekCalendarBody({week, date, hourFormat, setHourFormat}) {
                   })}
             </CalendarRow>
           </Box>
-          
 
+          <Grid container>
+          <CalendarRow week={true}>
+            <Grid item xs={0.995} flexDirection='column'>
+              {hoursInDay?.map((hour, i)=>{
+                return (
+                  <CalendarSmallCell key={i} week={true}>
+                    {hour}
+                  </CalendarSmallCell>)
+              })}
+            </Grid>
+
+            <Grid item xs={11.005}>
+              <CalendarRow week={true}>
+                {week?.map((weekDay, i)=>{
+                    return (
+                      <Grid item key={i} xs={12/week.length}>
+                          {hoursInDay?.map((hour, i)=>{
+                            return (
+                              <CalendarStandartCell key={i} week={true}>
+                                
+                              </CalendarStandartCell>)
+                          })}
+                      </Grid>) 
+                    })}
+              </CalendarRow>
+            </Grid>
+          </CalendarRow>
+          </Grid>
         </Box>
     </>
   );

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

@@ -17,6 +17,16 @@ function WeekCalendar() {
     setDate({year: year, month: month, currentDay: currentDay})
   }, [])
 
+  const hoursInDay = useMemo(()=>{
+    let arr
+    if (hourFormat) {
+      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']
+    } else {
+      arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+    }
+    return arr
+  }, [hourFormat])
+
   const week = useMemo(()=>{
     return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
   }, [date])
@@ -37,7 +47,7 @@ function WeekCalendar() {
 
   const weekInfo = useMemo(()=>{
     return getWeekInfoString(week, date)
-  }, [date])
+  }, [date, week])
   
   return (
     <>
@@ -48,11 +58,10 @@ function WeekCalendar() {
       />
       <WeekCalendarBody
         week={week}
-        date={date}
         hourFormat={hourFormat}
         setHourFormat={setHourFormat}
+        hoursInDay={hoursInDay}
       />
-      {week.join(' ')}
     </>
   );
 }

planner-front/src/helpers/CalendarHelpers.js

@@ -58,10 +58,10 @@ export const getWeekFromCurrentDate = (year, month, curDay) => {
 
 export const getWeekInfoString = (week, date) => {
   if (week[0] > week[6]) {
-    if (date.month === 0) {
-      return getCurrentMonthString(11) + ' - ' + getCurrentMonthString(date.month) + ' ' + date.year
+    if (date.month === 11) {
+      return getCurrentMonthString(date.month) + ' - ' + getCurrentMonthString(0) +  ' ' + date.year
     }
-    return getCurrentMonthString(date.month - 1) + ' - ' + getCurrentMonthString(date.month) +  ' ' + date.year
+    return getCurrentMonthString(date.month) + ' - ' + getCurrentMonthString(date.month + 1) +  ' ' + date.year
   } else {
     return getCurrentMonthString(date.month) +  ' ' + date.year
   }