From 6d5fe3277eb91eadff43fc3c184ecbece3b25d39 Mon Sep 17 00:00:00 2001
From: Paul Mojica <paulmojicatech@gmail.com>
Date: Sun, 29 Jan 2023 13:39:57 -0700
Subject: [PATCH] add day of week header

---
 .../src/components/month-view/month-view.scss  |  8 ++++++++
 .../src/components/month-view/month-view.tsx   | 18 ++++++++++++++++--
 libs/pmt-calendar/src/models/calendar.const.ts | 10 ++++++++++
 libs/pmt-calendar/src/utils/date-utils.ts      |  7 +++++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 libs/pmt-calendar/src/components/month-view/month-view.scss
 create mode 100644 libs/pmt-calendar/src/utils/date-utils.ts

diff --git a/libs/pmt-calendar/src/components/month-view/month-view.scss b/libs/pmt-calendar/src/components/month-view/month-view.scss
new file mode 100644
index 0000000..9a805ca
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/libs/pmt-calendar/src/components/month-view/month-view.tsx b/libs/pmt-calendar/src/components/month-view/month-view.tsx
index ceadeca..7a0336e 100644
--- a/libs/pmt-calendar/src/components/month-view/month-view.tsx
+++ b/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>
         );
     }
 }
\ No newline at end of file
diff --git a/libs/pmt-calendar/src/models/calendar.const.ts b/libs/pmt-calendar/src/models/calendar.const.ts
index 53b9279..296182f 100644
--- a/libs/pmt-calendar/src/models/calendar.const.ts
+++ b/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'
+}
diff --git a/libs/pmt-calendar/src/utils/date-utils.ts b/libs/pmt-calendar/src/utils/date-utils.ts
new file mode 100644
index 0000000..a41f5de
--- /dev/null
+++ b/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];
+}
\ No newline at end of file