WIP

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
-import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
-import { Chip } from '../Chip/Chip';
 import styles from './CalendarGrid.module.scss';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
@@ -59,15 +58,16 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                     {grid.map(row => row)}
                 </div>
             </div>
-            {courseCells.map((Block: typeof CalendarCourseCell) => (
+            {courseCells.map((block: CalendarGridCourse) => (
                 <div
-                    key={`${Block}`}
+                    key={`${block}`}
                     style={{
-                        gridColumn: `1`,
-                        gridRow: `1`,
+                        gridColumn: `${block.calendarGridPoint.dayIndex}`,
+                        gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                     }}
                 >
-                    <CalendarCourseCell courseDeptAndInstr={} />
+                    <CalendarCourseCell courseDeptAndInstr={block.componentProps.courseDeptAndInstr} 
+                                        status={block.componentProps.status} colors={block.componentProps.colors}/>
                 </div>
                 ))}
         </div>