prep

src/components/Scheduler.tsx

@@ -73,21 +73,21 @@ export const Scheduler = () => {
       currentEventsIds.map((eventId: string) => {
         const event = document.getElementById(eventId);
         if (event) {
-          event.style.display = 'block';
+          event.style.backgroundColor = 'blue';
         }
       });
     };
     displayEvents();
   }, [currentEventsIds]);
 
-  // const handleClick = (e: React.MouseEvent) => {
-  //   const cellId = e.currentTarget.id;
-  //   const column = cellId.slice(0, 1);
-  //   const row = cellId.slice(1);
-  //   const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-
-  //   setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
-  // };
+  const handleClick = (e: React.MouseEvent) => {
+    const cellId = e.currentTarget.id;
+    // const column = cellId.slice(0, 9);
+    // const row = cellId.slice(1);
+    //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
+    console.log(cellId)
+    setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
+  };
 
   return (
     <>
@@ -114,7 +114,7 @@ export const Scheduler = () => {
             </TableRow>
           ))}
         </TableBody>
-        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
+        <SchedulerEvents onClick={handleClick} cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13}/>
       </SchedulerWrapper>
     </>
   );

src/components/SchedulerEvents.tsx

@@ -7,9 +7,10 @@ interface SchedulerEventsProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
+  onClick: (e: React.MouseEvent) => void
 }
 
-export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
+export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
   const { basket } = useContext(coursesContext)!;
 
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@@ -50,6 +51,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
     <div>
       {[...Array(6)].map((_, index) => (
         <SchedulerRow
+          onClick={onClick}
           key={index}
           groups={choosenGroupsMappedToEvents.filter((group: any) => {
             return group.eventRow === index;

src/components/SchedulerRow.tsx

@@ -25,13 +25,15 @@ interface SchedulerRowProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
+  onClick: (e: React.MouseEvent) => void
 }
 
-export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
         <SchedulerEvent
+          onClick={onClick}
           eventIndex={eventIndex}
           cellTop={cellTop}
           cellWidth={cellWidth}