add day of week header

libs/pmt-calendar/src/components/month-view/month-view.scss

@@ -0,0 +1,8 @@
+.monthViewContainer {
+    padding: 0 1rem;
+}
+.dayOfWeek {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+}

libs/pmt-calendar/src/components/month-view/month-view.tsx

@@ -1,17 +1,31 @@
 import { Component, h, Prop } from "@stencil/core";
+import { DAY_OF_WEEK } from "../../models/calendar.const";
 
 @Component({
     tag: 'pmt-month-view',
-    shadow: true
+    shadow: true,
+    styleUrl: 'month-view.scss'
 })
 export class MonthViewComponent {
 
     @Prop()
     currentDate: Date;
 
+    readonly DAYS_OF_WEEK = Object.values(DAY_OF_WEEK);
+
+
+
     render() {
         return (
-            <div>{this.currentDate.toLocaleDateString()}</div>
+            <section class="monthViewContainer">
+                <div class="dayOfWeek">
+                    {this.DAYS_OF_WEEK.map(dow => {
+                        return (
+                            <div>{dow}</div>
+                        );
+                    })}
+                </div>
+            </section>
         );
     }
 }

libs/pmt-calendar/src/models/calendar.const.ts

@@ -4,3 +4,13 @@ export const CALENDAR_VIEW = {
     month: 'Month',
     year: 'Year'
 }
+
+export const DAY_OF_WEEK = {
+    0: 'Sunday',
+    1: 'Monday',
+    2: 'Tuesday',
+    3: 'Wednesday',
+    4: 'Thursday',
+    5: 'Friday',
+    6: 'Saturday'
+}

libs/pmt-calendar/src/utils/date-utils.ts

@@ -0,0 +1,7 @@
+import {getDay} from 'date-fns';
+import { DAY_OF_WEEK } from '../models/calendar.const';
+
+export function getDayOfWeekGivenDate(date: Date): string {
+    const dow = getDay(date);
+    return DAY_OF_WEEK[dow];
+}