add today click handler

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

@@ -8,6 +8,9 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface PmtCalendar {
     }
+    interface PmtMonthView {
+        "currentDate": Date;
+    }
 }
 declare global {
     interface HTMLPmtCalendarElement extends Components.PmtCalendar, HTMLStencilElement {
@@ -16,22 +19,34 @@ declare global {
         prototype: HTMLPmtCalendarElement;
         new (): HTMLPmtCalendarElement;
     };
+    interface HTMLPmtMonthViewElement extends Components.PmtMonthView, HTMLStencilElement {
+    }
+    var HTMLPmtMonthViewElement: {
+        prototype: HTMLPmtMonthViewElement;
+        new (): HTMLPmtMonthViewElement;
+    };
     interface HTMLElementTagNameMap {
         "pmt-calendar": HTMLPmtCalendarElement;
+        "pmt-month-view": HTMLPmtMonthViewElement;
     }
 }
 declare namespace LocalJSX {
     interface PmtCalendar {
     }
+    interface PmtMonthView {
+        "currentDate"?: Date;
+    }
     interface IntrinsicElements {
         "pmt-calendar": PmtCalendar;
+        "pmt-month-view": PmtMonthView;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "pmt-calendar": LocalJSX.PmtCalendar & JSXBase.HTMLAttributes<HTMLPmtCalendarElement>;
+            "pmt-month-view": LocalJSX.PmtMonthView & JSXBase.HTMLAttributes<HTMLPmtMonthViewElement>;
         }
     }
 }

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

@@ -26,6 +26,10 @@ export class CalendarComponent {
     this.currentDate = nextView;
   }
 
+  handleTodayBtnPress(): void {
+    this.currentDate = new Date();
+  }
+
   updateCurrentView(view: CalendarView) {
       this.currentView = view;
       const today = new Date();
@@ -75,11 +79,15 @@ export class CalendarComponent {
           <h1>{this.formatCurrentDate()}</h1>
           <div class="move-view-container">
               <button onClick={() => this.handleGetPrevView()}>{'<'}</button>
-              <button>Today</button>
+              <button onClick={() => this.handleTodayBtnPress()}>Today</button>
               <button onClick={() => this.handleGetNextView()}>{'>'}</button>
 
           </div>
         </div>
+
+        <div class="main-container">
+            <pmt-month-view currentDate={this.currentDate}></pmt-month-view>
+        </div>
       </section>
 
     )

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

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

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

@@ -0,0 +1,17 @@
+import { Component, h, Prop } from "@stencil/core";
+
+@Component({
+    tag: 'pmt-month-view',
+    shadow: true
+})
+export class MonthViewComponent {
+
+    @Prop()
+    currentDate: Date;
+
+    render() {
+        return (
+            <div>{this.currentDate}</div>
+        );
+    }
+}

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

@@ -0,0 +1,30 @@
+# pmt-month
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute | Description | Type   | Default     |
+| ------------- | --------- | ----------- | ------ | ----------- |
+| `currentDate` | --        |             | `Date` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [pmt-calendar](../calendar)
+
+### Graph
+```mermaid
+graph TD;
+  pmt-calendar --> pmt-month-view
+  style pmt-month-view fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*