#100 Разделил логику более в правильном виде, чуть поправил красоту кода

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

@@ -2,24 +2,16 @@ import { Grid } from "@mui/material";
 import CalendarRow from "../../../MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow";
 import CalendarStandartCell from "../../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell";
 
-function CalendarRowDayWeek({week, hoursInDay}) {
-  return ( <>
-  <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)=>{
+function CalendarRowDayWeek({ week, hoursInDay }) {
+  return (<>
+    {hoursInDay?.map((hour, i) => {
       return (
         <CalendarStandartCell key={i} week={true}>
 
         </CalendarStandartCell>)
     })}
-            </Grid>) 
-          })}
-    </CalendarRow>
-  </Grid>
-  </> );
+
+  </>);
 }
 
 export default CalendarRowDayWeek;
\ No newline at end of file

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

 export const getCurrentWeekDayString = (dayNumber) => {
   if (dayNumber <= 6 && dayNumber >= 0) {
-    return ["ПН","ВТ","СР","ЧТ","ПТ","СБ","ВС"][dayNumber];
+    return ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"][dayNumber];
   } else {
     return null
   }

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

@@ -6,26 +6,26 @@ import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/Calendar
 import CalendarRowDayWeek from "./CalendarRowDayWeek/CalendarRowDayWeek";
 import { getCurrentWeekDayString } from "./Helpers";
 
-function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
+function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, }) {
 
   return (
     <>
-        <Box style={{marginBottom: '30px'}}>
-          <Box style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}>
+      <Box style={{ marginBottom: '30px' }}>
+        <Box style={{ position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey' }}>
           <CalendarRow
           >
             <CalendarSmallCell xs={1}>
               <FormControlLabel
-                    control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>}
+                control={<Switch color="primary" checked={hourFormat} onChange={() => { setHourFormat(() => !hourFormat) }} />}
                 label="1 час"
                 labelPlacement="end"
               />
             </CalendarSmallCell>
-                {week?.map((weekDay, i)=>{
+            {week?.map((weekDay, i) => {
               return (
-                    <CalendarStandartCell key={i} xs={11/week.length}>
-                      <span style={{display: 'block', fontWeight: "600"}}>{weekDay}</span>
-                      <span style={{marginBottom: '10px'}}>{getCurrentWeekDayString(i)}</span>
+                <CalendarStandartCell key={i} xs={11 / week.length}>
+                  <span style={{ display: 'block', fontWeight: "600" }}>{weekDay}</span>
+                  <span style={{ marginBottom: '10px' }}>{getCurrentWeekDayString(i)}</span>
                 </CalendarStandartCell>
               )
             })}
@@ -35,7 +35,7 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
         <Grid container>
           <CalendarRow week={true}>
             <Grid item xs={0.995} flexDirection='column'>
-              {hoursInDay?.map((hour, i)=>{
+              {hoursInDay?.map((hour, i) => {
                 return (
                   <CalendarSmallCell key={i} week={true}>
                     {hour}
@@ -43,10 +43,19 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
               })}
             </Grid>
 
+            <Grid item xs={11.005}>
+              <CalendarRow week={true}>
+                {week?.map((weekDay, i) => {
+                  return (
+                    <Grid item key={i} xs={12 / week.length}>
                       <CalendarRowDayWeek
-              week={week}
                         hoursInDay={hoursInDay}
                       />
+                    </Grid>
+                  )
+                })}
+              </CalendarRow>
+            </Grid>
 
           </CalendarRow>
         </Grid>

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

-import { AppBar, Toolbar} from '@mui/material';
+import { AppBar, Toolbar } from '@mui/material';
 import { Box } from '@mui/system';
 import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
 
 
 
 
-function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
+function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo }) {
 
   return (
     <>

planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js

 import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
 import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
 import { Box } from '@mui/system';
-import {Typography} from '@mui/material';
+import { Typography } from '@mui/material';
 
 
 
-function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
+function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo }) {
 
   return (
     <>
-        <Box sx={{width: '40%', marginBottom: '15px'}}>
+      <Box sx={{ width: '40%', marginBottom: '15px' }}>
         <h2>Цель недели: Наладить режим сна</h2>
-          <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <ArrowDecrementButton
-              onClick={()=>{decrementWeek()}}
+            onClick={() => { decrementWeek() }}
           />
           <Typography
             variant="h6"
@@ -26,7 +26,7 @@ function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
             {weekInfo}
           </Typography>
           <ArrowIncrementButton
-              onClick={()=>{incrementWeek()}}
+            onClick={() => { incrementWeek() }}
           />
         </Box>
       </Box>

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

@@ -7,45 +7,45 @@ import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/Calenda
 
 function WeekCalendar() {
 
-  const [date, setDate] = useState({year: '', month: '', currentDay: ''})
+  const [date, setDate] = useState({ year: '', month: '', currentDay: '' })
   const [hourFormat, setHourFormat] = useState(false);
 
-  useEffect(()=>{
+  useEffect(() => {
     const year = new Date().getFullYear()
     const month = new Date().getMonth()
     const currentDay = moment().date()
-    setDate({year: year, month: month, currentDay: currentDay})
+    setDate({ year: year, month: month, currentDay: currentDay })
   }, [])
 
-  const hoursInDay = useMemo(()=>{
+  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']
+      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(()=>{
+  const week = useMemo(() => {
     return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
   }, [date])
 
   const incrementWeek = useCallback(() => {
-    setDate((prevState)=>{
+    setDate((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay + 7)
-      return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()}
+      return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
 
   const decrementWeek = useCallback(() => {
-    setDate((prevState)=>{
+    setDate((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7)
-      return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()}
+      return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
 
-  const weekInfo = useMemo(()=>{
+  const weekInfo = useMemo(() => {
     return getWeekInfoString(week, date)
   }, [date, week])