Generates daterange and active day automatically

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

 import React from "react";
 import Card from "react-bootstrap/Card";
 import styles from "./style.module.scss";
-import cx from "classnames";
 
 export interface WeekHeadingProps {
-  weekNumber: string;
-  dateRangeStart: string;
-  dateRangeEnd: string;
-  activeDay: number;
+  weekNumber: number;
+  dateRangeStart: Date;
+  dateRangeEnd: Date;
+  activeDay: Date;
 }
 
 let days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
@@ -16,25 +15,38 @@ const WeekHeading: React.FC<WeekHeadingProps> = ({
   weekNumber,
   dateRangeStart,
   dateRangeEnd,
-  activeDay
+  activeDay,
 }) => {
+  const dateRangeStartMonth = new Intl.DateTimeFormat("en", {
+    month: "2-digit",
+  }).format(dateRangeStart);
+  const dateRangeStartDay = new Intl.DateTimeFormat("en", {
+    day: "2-digit",
+  }).format(dateRangeStart);
+  const dateRangeEndMonth = new Intl.DateTimeFormat("en", {
+    month: "2-digit",
+  }).format(dateRangeEnd);
+  const dateRangeEndDay = new Intl.DateTimeFormat("en", {
+    day: "2-digit",
+  }).format(dateRangeEnd);
+
   return (
     <>
       <Card className={styles.weekCard}>
         <Card.Header>
           <div className={styles.weekHeading}>Week {weekNumber}</div>
           <div className={styles.weekDateRange}>
-            {dateRangeStart} - {dateRangeEnd}
+            {dateRangeStartDay}/{dateRangeStartMonth} - {dateRangeEndDay}/
+            {dateRangeEndMonth}
           </div>
         </Card.Header>
         <Card.Body>
-          {days.map(day => {
-            if (activeDay === days.indexOf(day) + 1) {
-              return (
-                <div className={cx(styles.activeDay, styles.dayIndicator)}>
-                  {day}
-                </div>
-              );
+          {days.map((day, i) => {
+            if (
+              activeDay.getTime() ===
+              dateRangeStart.getTime() + i * 86400000
+            ) {
+              return <div className={styles.activeDay}>{day}</div>;
             } else {
               return <div className={styles.dayIndicator}>{day}</div>;
             }

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

@@ -45,7 +45,9 @@
   color: var(--primary-text-color-inverse);
   background-color: var(--background-color-inverse) !important;
   border-radius: 0.25rem;
-  width: 3rem !important;
+	width: 3rem !important;
+	font-weight: 500;
+  text-align: center;
 }
 
 .weekDateRange {

src/components/pages/Timeline/index.tsx

@@ -4,7 +4,6 @@ import styles from "./style.module.scss";
 import TermSwitcher from "./components/TermSwitcher";
 import ModuleHeading from "./components/ModuleHeading";
 import WeekHeading from "./components/WeekHeading";
-import Table from "react-bootstrap/table";
 
 interface TimelineProps {
   initSideBar: () => void;
@@ -18,62 +17,51 @@ class Timeline extends React.Component<TimelineProps, {}> {
 
   componentWillUnmount() {
     this.props.revertSideBar();
-  }
+	}
+	
+	addDays(date: Date, days: number) {
+		var result = new Date(date);
+		result.setDate(result.getDate() + days);
+		return result;
+	}
 
   render() {
+    const termStart = new Date("2020-09-28");
+    const activeDay = new Date("2020-10-07");
+    const numWeeks = 12;
     return (
-      <>
-        <div className={styles.timelineContainer}>
-          <MyBreadcrumbs />
-          <div className={styles.timelineGrid}>
-            <div className={styles.timelineTermSwitcher}>
-              <TermSwitcher />
-            </div>
-            <div className={styles.timelineWeekRow}>
-              {[...Array(12)].map((e, i) => {
-                if (i == 1) {
-                  return (
-                    <div className={styles.weekHeading}>
-                      <WeekHeading
-                        weekNumber={`${i + 1}`}
-                        dateRangeStart={"06/10"}
-                        dateRangeEnd={"10/10"}
-                        activeDay={3}
-                      />
-                    </div>
-                  );
-                } else {
-                  return (
-                    <div className={styles.weekHeading}>
-                      <WeekHeading
-                        weekNumber={`${i + 1}`}
-                        dateRangeStart={"06/10"}
-                        dateRangeEnd={"10/10"}
-                        activeDay={0}
-                      />
-                    </div>
-                  );
-                }
-              })}
-            </div>
-            <div className={styles.timelineModuleColumn}>
-              {modules.map(module => (  
-              <div className={styles.moduleHeading}>
-                <ModuleHeading
-                  moduleCode={module.code}
-                  title={module.title}
+      <div className={styles.timelineContainer}>
+        <MyBreadcrumbs />
+        <div className={styles.timelineGrid}>
+          <div className={styles.timelineTermSwitcher}>
+            <TermSwitcher />
+          </div>
+          <div className={styles.timelineWeekRow}>
+            {[...Array(numWeeks)].map((_, i) => (
+              <div className={styles.weekHeading}>
+                <WeekHeading
+                  weekNumber={i + 1}
+                  dateRangeStart={this.addDays(termStart, i * 7)}
+                  dateRangeEnd={this.addDays(termStart, i * 7 + 4)}
+                  activeDay={activeDay}
                 />
               </div>
-              ))}
-            </div>
-            <div className={styles.timelineWeekBackground}> 
-              {[...Array(12)].map((e, i) => {
-                return <div className={styles.timelineBackground}>&nbsp;</div>
-              })}
-            </div>
+            ))}
+          </div>
+          <div className={styles.timelineModuleColumn}>
+            {modules.map((module) => (
+              <div className={styles.moduleHeading}>
+                <ModuleHeading moduleCode={module.code} title={module.title} />
+              </div>
+            ))}
+          </div>
+          <div className={styles.timelineWeekBackground}>
+            {[...Array(12)].map((e, i) => {
+              return <div className={styles.timelineBackground}>&nbsp;</div>;
+            })}
           </div>
         </div>
-      </>
+      </div>
     );
   }
 }
@@ -81,36 +69,36 @@ class Timeline extends React.Component<TimelineProps, {}> {
 let modules = [
   {
     title: "Introduction to Computer Systems",
-    code: "CO112"
+    code: "CO112",
   },
   {
     title: "Programming I (Haskell)",
-    code: "CO120.1"
+    code: "CO120.1",
   },
   {
     title: "Programming II (Java)",
-    code: "CO120.2"
+    code: "CO120.2",
   },
   {
     title: "Introduction to Logic",
-    code: "CO140"
+    code: "CO140",
   },
   {
     title: "Discrete Mathematics",
-    code: "CO142"
+    code: "CO142",
   },
   {
     title: "Mathematical Methods",
-    code: "CO145"
+    code: "CO145",
   },
   {
     title: "Computing Practical I",
-    code: "CO161"
+    code: "CO161",
   },
   {
     title: "Professional Issues",
-    code: "CO166"
-  }
+    code: "CO166",
+  },
 ];
 
 export default Timeline;