Didn't convert to table but managed to change stylings accordingly

src/components/App.tsx

@@ -7,19 +7,19 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   display: flex;
+  height: calc(100vh - 80px);
 `;
 
 export const App = () => {
   const [isOpenTransfer, setOpenTransfer] = useState(false);
 
-
   const handleTransfer = () => {
     setOpenTransfer(!isOpenTransfer);
   };
 
   return (
     <>
-      <Topbar handleTransfer={handleTransfer}  />
+      <Topbar handleTransfer={handleTransfer} />
       <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
       <Wrapper>
         <Scheduler />

src/components/Rightbar.tsx

@@ -9,8 +9,8 @@ const RightbarStyled = styled.div`
   padding-right: 15px;
   text-align: center;
   font-family: Lato;
+  height: 100%;
   width: 300px;
-  height: 85vh;
   overflow-y: scroll;
   ::-webkit-scrollbar-track {
     border-radius: 10px;

src/components/Scheduler.tsx

@@ -1,18 +1,17 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 const SchedulerWrapper = styled.div`
-  flex-grow: 3;
   margin-top: 20px;
   border-collapse: collapse;
+  flex-grow: 1;
 `;
 
 const TableBody = styled.div`
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
 `;
@@ -22,36 +21,46 @@ const TableRow = styled.div`
   flex-direction: row;
 `;
 
-const TableCell = styled.div`
-  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: center;
-  flex: 1;
-`;
-
 const TableHead = styled.div`
   display: flex;
   width: 100%;
 `;
 
-const TableHeadCell = styled.div`
+interface TableCellProps {
+  height: number;
+}
+
+const TableCell = styled.div<TableCellProps>`
+  height: ${({ height }) => height}px;
   border: 1px solid #ddd;
-  padding: 10px;
   text-align: center;
   flex: 1;
 `;
 
+const T = styled.table`
+  width: 100%;
+  height: 100%;
+`;
+
 export const Scheduler = () => {
   const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellTop, setCellTop] = useState(0);
 
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [wrapperHeight, setWrapperHeight] = useState(0);
+
+  useEffect(() => {
+    console.log(cellTop);
+  }, [cellTop]);
+
   useEffect(() => {
     const handleResize = () => {
-      if (cellRef.current) {
+      if (cellRef.current && wrapperRef.current) {
         setCellWidth(cellRef.current.getBoundingClientRect().width);
         setCellTop(cellRef.current.getBoundingClientRect().top);
+        setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
       }
     };
     handleResize();
@@ -81,10 +90,12 @@ export const Scheduler = () => {
 
   return (
     <>
-      <SchedulerWrapper>
+      <SchedulerWrapper ref={wrapperRef}>
         <TableHead>
           {days.map((day, index) => (
-            <TableHeadCell key={index}>{day}</TableHeadCell>
+            <TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
+              {day}
+            </TableCell>
           ))}
         </TableHead>
         <TableBody>
@@ -92,15 +103,17 @@ export const Scheduler = () => {
             <TableRow key={indexRow}>
               {[hour, '', '', '', '', ''].map((value, indexCell) =>
                 indexRow === 0 && indexCell === 1 ? (
-                  <TableCell key={`${indexRow}${indexCell}`} ref={cellRef}></TableCell>
+                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
                 ) : (
-                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
+                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
                 ),
               )}
             </TableRow>
           ))}
         </TableBody>
-        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
+        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
       </SchedulerWrapper>
     </>
   );

src/components/SchedulerEvents.tsx

@@ -2,14 +2,14 @@ import React, { useContext, useEffect, useState } from 'react';
 import { SchedulerRow } from './SchedulerRow';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Group, Basket } from '../types';
-import classes from '*.module.css';
 
 interface SchedulerEventsProps {
   cellTop: number;
   cellWidth: number;
+  cellHeight: number;
 }
 
-export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
+export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
   const { basket } = useContext(coursesContext)!;
 
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@@ -56,13 +56,22 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
           })}
           indexRow={index}
           cellTop={
-            index == 3
+            index === 0
-              ? cellTop + (25 + 80 * index)
+              ? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
-              : index < 3
+              : index === 1
-              ? cellTop + (12 + 80 * index)
+              ? cellTop + (cellHeight + cellHeight * 2 * index)
-              : cellTop + (25 + 80 * index)
+              : index === 2
+              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
+              : index === 3
+              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
+              : index === 4
+              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
+              : index === 5
+              ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
+              : 0
           }
           cellWidth={cellWidth}
+          cellHeight={cellHeight}
         />
       ))}
     </div>

src/components/SchedulerRow.tsx

@@ -6,14 +6,15 @@ interface SchedulerEventProps {
   eventIndex: number;
   cellTop: number;
   cellWidth: number;
+  cellHeight: number;
 }
 
 const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
-  top: ${(props) => props.cellTop}px;
+  top: ${({ cellTop }) => cellTop}px;
-  left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
+  left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
-  width: ${(props) => (props.cellWidth * 2) / 3}px;
+  width: ${({ cellWidth }) => (cellWidth * 2) / 3}px;
-  height: 69px;
+  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   background-color: lightblue;
   z-index: 2;
 `;
@@ -23,11 +24,10 @@ interface SchedulerRowProps {
   indexRow: number;
   cellTop: number;
   cellWidth: number;
+  cellHeight: number;
 }
 
-export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
-
-
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
@@ -35,12 +35,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
           eventIndex={eventIndex}
           cellTop={cellTop}
           cellWidth={cellWidth}
+          cellHeight={cellHeight}
           key={eventIndex}
           id={`eventRow${indexRow}eventCol${eventIndex}`}
         >
-          {groups.map((group, index) =>
+          {groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
-            group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>,
-          )}
         </SchedulerEvent>
       ))}
     </>

src/components/Topbar.tsx

@@ -102,9 +102,9 @@ export default function ({ handleTransfer }: TopbarProps) {
       <TopbarInputStyled>
         <TopbarInputIconStyled alt="search" src={Search} />
         <TopbarInputFieldStyled>
-          <Dropdown clearInput={clearInput} handleClearInput={handleClearInput}/>
+          <Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
         </TopbarInputFieldStyled>
-        <TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput}/>
+        <TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
       </TopbarInputStyled>
       <TopbarIconBox>
         <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
@@ -114,4 +114,4 @@ export default function ({ handleTransfer }: TopbarProps) {
       </TopbarIconBox>
     </Topbar>
   );
-};
+}