tylko wybrane gruppy

src/components/Scheduler.tsx

@@ -85,7 +85,7 @@ export const Scheduler = () => {
     // const column = cellId.slice(0, 9);
     // const row = cellId.slice(1);
     //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-    console.log(cellId)
+    console.log(currentEventsIds)
     setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
   };
 

src/components/SchedulerRow.tsx

@@ -13,10 +13,16 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
   top: ${({ cellTop }) => cellTop}px;
   left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
+  z-index: 2;
+`;
+
+const ClassDiv = styled.div<SchedulerEventProps>`
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
-  background-color: lightblue;
   z-index: 2;
+  border-radius: 10px;
+  padding-left:5px;
+  background-color: rgb(100, 181, 246);
 `;
 
 interface SchedulerRowProps {
@@ -25,7 +31,7 @@ interface SchedulerRowProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: React.MouseEvent) => void
+  onClick: (e: React.MouseEvent) => void;
 }
 
 export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
@@ -41,7 +47,21 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
           key={eventIndex}
           id={`eventRow${indexRow}eventCol${eventIndex}`}
         >
-          {groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
+          {groups.map(
+            (group, index) =>
+              group.day === eventIndex && (
+                <ClassDiv
+                  eventIndex={eventIndex}
+                  cellTop={cellTop}
+                  cellWidth={cellWidth}
+                  cellHeight={cellHeight}
+                  id={`eventRow${indexRow}eventCol${eventIndex}`}
+                  key={index}
+                >
+                  {groups[index]?.lecturer}
+                </ClassDiv>
+              ),
+          )}
         </SchedulerEvent>
       ))}
     </>