basic component laid out - missing Text and Right Icon, can add more stories

src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss

@@ -0,0 +1,11 @@
+.calendar-course {
+    display: flex;
+    padding: 7px 7px 9px 7px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 4px;
+    background: #cbd5e1;
+}

src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import styles from './CalendarCourseMeeting.module.scss';
+
+/**
+ * Props for the CalendarCourseMeeting component.
+ */
+export interface CalendarCourseMeetingProps {
+    /** The Course that the meeting is for. */
+    course: Course;
+    /* index into course meeting array to display */
+    meetingIdx?: number;
+    /** The background color for the course. */
+    color: string;
+    /** The icon to display on the right side of the course. This is optional. */
+    rightIcon?: React.ReactNode;
+}
+
+/**
+ * `CalendarCourseMeeting` is a functional component that displays a course meeting.
+ *
+ * @example
+ * <CalendarCourseMeeting course={course} meeting={meeting} color="red" rightIcon={<Icon />} />
+ */
+const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
+    course,
+    meetingIdx,
+}: CalendarCourseMeetingProps) => {
+    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
+    return (
+        <div className={styles['calendar-course']}>
+            <div>
+                {course.department} {course.number} - {course.instructors[0].lastName}
+            </div>
+            {meeting && (
+                <div>
+                    {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
+                        meeting.location ? ` - ${meeting.location.building}` : ''
+                    }`}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CalendarCourseMeeting;