diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index 43cdf32..ca4adc7 100644 --- a/src/components/Scheduler.tsx +++ b/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]); }; diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index b3cf429..a2545e4 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -13,10 +13,16 @@ const SchedulerEvent = styled.div` position: absolute; top: ${({ cellTop }) => cellTop}px; left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; + z-index: 2; +`; + +const ClassDiv = styled.div` 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 &&
{groups[index]?.lecturer}
)} + {groups.map( + (group, index) => + group.day === eventIndex && ( + + {groups[index]?.lecturer} + + ), + )} ))}