progress

libs/pmt-calendar/src/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface PmtCalendar {
     }
-    interface PmtCalendarHeader {
+    interface PmtCalendarSubHeader {
     }
 }
 declare global {
@@ -18,33 +18,33 @@ declare global {
         prototype: HTMLPmtCalendarElement;
         new (): HTMLPmtCalendarElement;
     };
-    interface HTMLPmtCalendarHeaderElement extends Components.PmtCalendarHeader, HTMLStencilElement {
+    interface HTMLPmtCalendarSubHeaderElement extends Components.PmtCalendarSubHeader, HTMLStencilElement {
     }
-    var HTMLPmtCalendarHeaderElement: {
-        prototype: HTMLPmtCalendarHeaderElement;
-        new (): HTMLPmtCalendarHeaderElement;
+    var HTMLPmtCalendarSubHeaderElement: {
+        prototype: HTMLPmtCalendarSubHeaderElement;
+        new (): HTMLPmtCalendarSubHeaderElement;
     };
     interface HTMLElementTagNameMap {
         "pmt-calendar": HTMLPmtCalendarElement;
-        "pmt-calendar-header": HTMLPmtCalendarHeaderElement;
+        "pmt-calendar-sub-header": HTMLPmtCalendarSubHeaderElement;
     }
 }
 declare namespace LocalJSX {
     interface PmtCalendar {
     }
-    interface PmtCalendarHeader {
+    interface PmtCalendarSubHeader {
     }
     interface IntrinsicElements {
         "pmt-calendar": PmtCalendar;
-        "pmt-calendar-header": PmtCalendarHeader;
+        "pmt-calendar-sub-header": PmtCalendarSubHeader;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "pmt-calendar": LocalJSX.PmtCalendar & JSXBase.HTMLAttributes<HTMLPmtCalendarElement>;
-            "pmt-calendar-header": LocalJSX.PmtCalendarHeader & JSXBase.HTMLAttributes<HTMLPmtCalendarHeaderElement>;
+            "pmt-calendar-sub-header": LocalJSX.PmtCalendarSubHeader & JSXBase.HTMLAttributes<HTMLPmtCalendarSubHeaderElement>;
         }
     }
 }

libs/pmt-calendar/src/components/calendar-sub-header/readme.md

@@ -0,0 +1,10 @@
+# pmt-calendar-sub-header
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -4,10 +4,32 @@
 
 .container {
   padding: 1rem;
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
   width: 100vw;
   pmt-calendar-header {
     width: 100%;
   }
 }
+
+
+.calendar-header-container {
+  display: inline-flex;
+  justify-content: center;
+  justify-self: center;
+  width: 100%;
+  span {
+      padding: 1rem;
+
+  }
+  button {
+      background-color: #fff;
+      padding: 1rem;
+      font-size: 1.25rem;
+      &.selected {
+          background-color: blue;
+          color: #fff;
+      }
+  }
+}

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

@@ -1,18 +1,57 @@
-import { Component, h } from '@stencil/core';
-
+import { Component, h, State } from '@stencil/core';
+import { CALENDAR_VIEW } from '../../models/calendar.const';
+import { CalendarView } from '../../models/calendar.types';
+import { format } from 'date-fns';
 @Component({
   tag: 'pmt-calendar',
   styleUrl: 'calendar.scss',
   shadow: true,
 })
 export class CalendarComponent {
 
+  @State()
+  currentView: CalendarView = 'Month';
+
+  @State()
+  currentSubTitle: string = format(new Date(new Date().getFullYear(), new Date().getMonth()), 'MMMM yyyy');
+
+  updateCurrentView(view: CalendarView) {
+      this.currentView = view;
+      const today = new Date();
+      switch (view) {
+        case 'Day': {
+          this.currentSubTitle = format(today, 'MMMM dd, yyyy');
+          break;
+        }
+        case 'Year': {
+          this.currentSubTitle = format(today, 'yyyy');
+          break;
+        }
+        default:
+          this.currentSubTitle = format(today, 'MMMM yyyy');
+          break;
+      }
+  }
+
   render() {
     return (
       <section class="container">
         <div class="header">
-          <pmt-calendar-header></pmt-calendar-header>
-      </div>  
+        <div class="calendar-header-container">
+                {Object.keys(CALENDAR_VIEW).map(key => {
+                    return (
+                        <button 
+                            class={CALENDAR_VIEW[key] === this.currentView ? 'selected' : ''} 
+                            onClick={() => this.updateCurrentView(CALENDAR_VIEW[key])} key={key}>
+                                {CALENDAR_VIEW[key]}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+        <div class="subb-header">
+          <h1>{this.currentSubTitle}</h1>
+        </div>
       </section>
 
     )

libs/pmt-calendar/src/components/calendar/readme.md

@@ -3,19 +3,6 @@
 <!-- Auto Generated Below -->
 
 
-## Dependencies
-
-### Depends on
-
-- [pmt-calendar-header](../calendar-header)
-
-### Graph
-```mermaid
-graph TD;
-  pmt-calendar --> pmt-calendar-header
-  style pmt-calendar fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package.json

@@ -123,7 +123,7 @@
     "chart.js": "^3.9.1",
     "cheerio": "^1.0.0-rc.12",
     "core-js": "^3.6.5",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.3",
     "dotenv": "^16.0.1",
     "express": "^4.18.1",
     "ionicons": "^6.0.1",