adding example data for pfits 18/55 and hovering over cells. Next up is clicking to change color to green and right clicking to reset to white.

src/app/calendar/calendar.component.scss

@@ -0,0 +1,39 @@
+table {
+    width: 100%;
+}
+
+tr {
+    display: flex;
+    width: 100%;
+}
+
+td {
+    padding: 20px 0;
+}
+
+th,
+td {
+    flex: 1;
+    text-align: center;
+    border: 1px solid black;
+}
+
+.container {
+    margin-left: 24px;
+    margin-right: 24px;
+}
+
+.noselect {
+-webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome, Edge, Opera and Firefox */
+}
+
+.hoverOverWorkout:hover {
+    background-color: rgb(211, 211, 211);
+}
+