#85 сделал вывод недели на страницу

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

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

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

+import { FormControlLabel, 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}) {
+  
+  return (
+    <>
+        <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)}}/>}
+                    label="1 час"
+                    labelPlacement="end"
+                  />
+                </CalendarSmallCell>
+                {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>
+                    ) 
+                  })}
+            </CalendarRow>
+          </Box>
+          
+
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarBody;
\ No newline at end of file

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

+import { AppBar, Toolbar} from '@mui/material';
+import { Box } from '@mui/system';
+import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
+
+
+
+
+function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
+  
+  return (
+    <>
+        <Box sx={{ flexGrow: 1 }}>
+          <AppBar position="static">
+            <Toolbar>
+
+                  <WeekCalendarHeaderInfo
+                    decrementWeek={decrementWeek}
+                    incrementWeek={incrementWeek}
+                    weekInfo={weekInfo}
+                  />
+
+            </Toolbar>
+          </AppBar>
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarHeader;
\ No newline at end of file

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';
+
+
+
+function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
+  
+  return (
+    <>
+        <Box sx={{width: '40%', marginBottom: '15px'}}>
+          <h2>Цель недели: Наладить режим сна</h2>
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
+            <ArrowDecrementButton
+              onClick={()=>{decrementWeek()}}
+            />
+              <Typography
+                variant="h6" 
+                sx={{  
+                  flexBasis: '250px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                {weekInfo}
+              </Typography>
+            <ArrowIncrementButton
+              onClick={()=>{incrementWeek()}}
+            />
+          </Box>
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarHeaderInfo;
\ No newline at end of file

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

-import { AppBar, Toolbar, Typography} from '@mui/material';
-import { Box } from '@mui/system';
-import ArrowDecrementButton from '../UI/ArrowDecrementButton/ArrowDecrementButton';
-import ArrowIncrementButton from '../UI/ArrowIncrementButton/ArrowIncrementButton';
-
-
-
-
-function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
-  
-  return (
-    <>
-        <Box sx={{ flexGrow: 1 }}>
-          <AppBar position="static">
-            <Toolbar>
-              <Box sx={{width: '40%', marginBottom: '15px'}}>
-                <h2>Цель недели: Наладить режим сна</h2>
-                <Box sx={{display: 'flex', alignItems: 'center'}}>
-                  <ArrowDecrementButton
-                    onClick={()=>{decrementWeek()}}
-                  />
-                    <Typography
-                      variant="h6" 
-                      sx={{  
-                        flexBasis: '250px',
-                        display: 'flex',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      {weekInfo}
-                    </Typography>
-                  <ArrowIncrementButton
-                    onClick={()=>{incrementWeek()}}
-                  />
-                </Box>
-              </Box>
-              
-
-            </Toolbar>
-          </AppBar>
-        </Box>
-    </>
-  );
-}
-
-export default WeekCalendarHeader;
\ No newline at end of file

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

 import moment from 'moment';
 import { useEffect, useState, useMemo, useCallback  } from 'react';
-import WeekCalendarHeader from '../../components/WeekCalendarHeader/WeekCalendarHeader';
+import WeekCalendarBody from '../../components/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
+import WeekCalendarHeader from '../../components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'
 import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
 
 
 function WeekCalendar() {
 
   const [date, setDate] = useState({year: '', month: '', currentDay: ''})
+  const [hourFormat, setHourFormat] = useState(false);
 
   useEffect(()=>{
     const year = new Date().getFullYear()
@@ -44,6 +46,12 @@ function WeekCalendar() {
         decrementWeek={decrementWeek}
         weekInfo={weekInfo}
       />
+      <WeekCalendarBody
+        week={week}
+        date={date}
+        hourFormat={hourFormat}
+        setHourFormat={setHourFormat}
+      />
       {week.join(' ')}
     </>
   );