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.html

@@ -0,0 +1,30 @@
+<div class="container">
+    <table class="noselect">
+        <tr>
+            <th>Week</th>
+            <th>Monday</th>
+            <th>Tuesday</th>
+            <th>Wednesday</th>
+            <th>Thursday</th>
+            <th>Friday</th>
+            <th>Saturday</th>
+            <th>Sunday</th>
+            <th>Total Milage</th>
+        </tr>
+        @for (week of examplePlan.workouts; track $index) {
+        <tr>
+            <td>
+                <div>Week {{$index + 1}}</div>
+            </td>
+            @for (day of week; track $index) {
+            <td class="hoverOverWorkout">
+                <div>{{day.type}}</div>
+                <div>{{day.totalDistance == 0 ? '' : day.totalDistance + ' miles'}}</div>
+                <div>{{day.description}}</div>
+            </td>
+            }
+            <td>43</td>
+        </tr>
+        }
+    </table>
+</div>

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);
+}
+

src/app/calendar/calendar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CalendarComponent } from './calendar.component';
+
+describe('CalendarComponent', () => {
+  let component: CalendarComponent;
+  let fixture: ComponentFixture<CalendarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CalendarComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CalendarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/calendar/calendar.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { examplePlan } from '../testData/examplePlan';
+import { Plan } from '../models/plan.model';
+
+@Component({
+  selector: 'calendar',
+  standalone: true,
+  imports: [],
+  templateUrl: './calendar.component.html',
+  styleUrl: './calendar.component.scss'
+})
+export class CalendarComponent {
+    examplePlan: Plan = examplePlan;
+
+    ngOnInit(): void {
+        
+    }
+}