Separate component for Event cards

src/components/pages/Timeline/components/DayIndicatorGrid/index.tsx

 import React from "react";
 import styles from "./style.module.scss";
-export interface ModuleHeadingprops {
-  numWeeks: number;
-  activeDay: Date;
-  termStart: Date;
+
+export interface DayIndicatorGridProps {
+	numWeeks: number;
+	activeDay: Date;
+	activeColumn: number;
 }
 
-const DayIndicatorGrid: React.FC<ModuleHeadingprops> = ({
-  numWeeks,
-  activeDay,
-  termStart,
+const DayIndicatorGrid: React.FC<DayIndicatorGridProps> = ({
+	numWeeks,
+	activeDay,
+  activeColumn,
 }) => {
-  const activeColumn =
-    Math.ceil(
-      ((activeDay.getTime() - termStart.getTime()) / 86400000 / 7) * 6
-    ) + 1;
-
   return (
     <div
       className={styles.dayIndicatorGrid}

src/components/pages/Timeline/components/EventGrid/index.tsx

 import React from "react";
 import styles from "./style.module.scss";
+import { TimelineEvent } from "../..";
+import TimelineEventCard from "../TimelineEventCard";
 export interface EventGridProps {
   numWeeks: number;
   trackHeight: number;
+  events: TimelineEvent[];
 }
 
-const EventGrid: React.FC<EventGridProps> = ({ numWeeks, trackHeight }) => {
+const EventGrid: React.FC<EventGridProps> = ({
+  numWeeks,
+  trackHeight,
+  events,
+}) => {
   return (
     <div
       className={styles.timelineCardGrid}
@@ -14,15 +21,14 @@ const EventGrid: React.FC<EventGridProps> = ({ numWeeks, trackHeight }) => {
         gridTemplateRows: `${trackHeight}rem ${trackHeight}rem 0.3125rem repeat(${7}, ${trackHeight}rem ${trackHeight}rem 0.625rem) ${trackHeight}rem ${trackHeight}rem 0.3125rem`,
       }}
     >
-      <div className={styles.timelineEvent} style={{ gridColumn: `1 / 9` }}>
-        <span className={styles.eventTitle}>Title of the first event</span>
-      </div>
-      <div
-        className={styles.timelineEvent}
-        style={{ gridColumn: `3 / 24`, gridRow: `2` }}
-      >
-        <span className={styles.eventTitle}>Title of the second event</span>
-      </div>
+      {events.map(({ title }, i) => (
+        <TimelineEventCard
+          title={title}
+          startColumn={i + 1}
+          endColumn={i + 8}
+          rowNumber={2 * i}
+        />
+      ))}
     </div>
   );
 };

src/components/pages/Timeline/components/EventGrid/style.module.scss

@@ -3,18 +3,4 @@
   display: grid;
   grid-area: background;
   z-index: 3;
-}
-
-.timelineEvent {
-  background: red;
-  margin: 0.5rem;
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-}
-
-.eventTitle {
-  color: var(--primary-text-color);
-  font-size: 1rem;
-}
+}
\ No newline at end of file

src/components/pages/Timeline/components/TimelineEventCard/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+export interface TimelineEventProps {
+  title: string;
+  startColumn: number;
+  endColumn: number;
+  rowNumber: number;
+}
+
+const TimelineEventCard: React.FC<TimelineEventProps> = ({
+  title,
+  startColumn,
+  endColumn,
+  rowNumber,
+}) => {
+  return (
+    <div
+      className={styles.timelineEvent}
+      style={{ gridColumn: `${startColumn} / ${endColumn}`, gridRow: `${rowNumber}` }}
+    >
+      <span className={styles.eventTitle}>{title}</span>
+    </div>
+  );
+};
+
+export default TimelineEventCard;

src/components/pages/Timeline/components/TimelineEventCard/style.module.scss

+.timelineEvent {
+  background: red;
+  margin: 0.5rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.eventTitle {
+  color: var(--primary-text-color);
+  font-size: 1rem;
+}

src/components/pages/Timeline/eventsData.ts

+import { TimelineEvent } from ".";
+
+
+export const eventsData : TimelineEvent[] = [
+	{
+		title: "Logic Exercise",
+		id: 0,
+		startDate: new Date("2020-10-01"),
+		endDate: new Date("2020-10-08"),
+		moduleCode: "CO140"
+	},
+	{
+		title: "Circuit Analysis",
+		id: 0,
+		startDate: new Date("2020-10-04"),
+		endDate: new Date("2020-10-09"),
+		moduleCode: "CO112"
+	}
+]
\ No newline at end of file

src/components/pages/Timeline/index.tsx

@@ -7,18 +7,23 @@ import WeekRow from "./components/WeekRow";
 import ModuleRows from "./components/ModuleRows";
 import DayIndicatorGrid from "./components/DayIndicatorGrid";
 import EventGrid from "./components/EventGrid";
+import { eventsData } from "./eventsData";
 
 interface TimelineProps {
   initSideBar: () => void;
   revertSideBar: () => void;
 }
 
-interface Event {
-  title: string;
+export interface TimelineEvent {
+	title: string;
+	id: number;
+	moduleCode: string;
+	startDate: Date;
+	endDate: Date;
 }
 
 export type ModuleTracks = {
-  [index: string]: Event[][];
+  [index: string]: TimelineEvent[][];
 };
 
 interface TimelineState {
@@ -44,6 +49,12 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
     this.props.revertSideBar();
   }
 
+  dateToColumn(day: Date, termStart: Date) {
+    return (
+      Math.ceil(((day.getTime() - termStart.getTime()) / 86400000 / 7) * 6) + 1
+    );
+  }
+
   render() {
     const termStart = new Date("2020-09-28");
     const activeDay = new Date("2020-10-12");
@@ -68,12 +79,12 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
           />
 
           <DayIndicatorGrid
-            numWeeks={numWeeks}
-            activeDay={activeDay}
-            termStart={termStart}
+						numWeeks={numWeeks}
+						activeDay={activeDay}
+            activeColumn={this.dateToColumn(activeDay, termStart)}
           />
 
-          <EventGrid numWeeks={numWeeks} trackHeight={trackHeight} />
+          <EventGrid numWeeks={numWeeks} trackHeight={trackHeight} events={eventsData}/>
         </div>
       </div>
     );