WIP

src/stories/components/CalendarCourseCell.stories.tsx

@@ -32,7 +32,6 @@ const meta = {
         status: exampleCourse.status,
         meetingTime: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
 
-
         colors: getCourseColors('emerald', 500),
     },
 } satisfies Meta<typeof CalendarCourseCell>;

src/stories/components/CalendarGrid.stories.tsx

@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import { getCourseColors } from 'src/shared/util/colors';
+import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import { Status } from 'src/shared/types/Course';
 
 const meta = {
     title: 'Components/Common/CalendarGrid',
@@ -14,10 +17,41 @@ const meta = {
 } satisfies Meta<typeof CalendarGrid>;
 export default meta;
 
+const testData: CalendarGridCourse[] = [
+  {
+      calendarGridPoint: {
+          dayIndex: 0,
+          startIndex: 1,
+          endIndex: 2,
+      },
+      componentProps: {
+          courseDeptAndInstr: 'Course 1',
+          timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
+          status: Status.OPEN,
+          colors: getCourseColors('emerald', 500),
+      },
+  },
+  {
+      calendarGridPoint: {
+          dayIndex: 1,
+          startIndex: 2,
+          endIndex: 3,
+      },
+      componentProps: {
+          courseDeptAndInstr: 'Course 2',
+          timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+          status: Status.CLOSED,
+          colors: getCourseColors('emerald', 500),
+      },
+  },
+  // add more data as needed
+];
+
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
         saturdayClass: true,
+        courseCells: testData,
     },
 };

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`,
+                        gridColumn: `${block.calendarGridPoint.dayIndex}`,
-                        gridRow: `1`,
+                        gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                     }}
                 >
-                    <CalendarCourseCell courseDeptAndInstr={} />
+                    <CalendarCourseCell courseDeptAndInstr={block.componentProps.courseDeptAndInstr} 
+                                        status={block.componentProps.status} colors={block.componentProps.colors}/>
                 </div>
                 ))}
         </div>