diff --git a/libs/pmt-calendar/src/components.d.ts b/libs/pmt-calendar/src/components.d.ts index ce0969e..dc10045 100644 --- a/libs/pmt-calendar/src/components.d.ts +++ b/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,25 +18,25 @@ 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 }; @@ -44,7 +44,7 @@ declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "pmt-calendar": LocalJSX.PmtCalendar & JSXBase.HTMLAttributes; - "pmt-calendar-header": LocalJSX.PmtCalendarHeader & JSXBase.HTMLAttributes; + "pmt-calendar-sub-header": LocalJSX.PmtCalendarSubHeader & JSXBase.HTMLAttributes; } } } diff --git a/libs/pmt-calendar/src/components/calendar-header/calendar-header.scss b/libs/pmt-calendar/src/components/calendar-header/calendar-header.scss deleted file mode 100644 index eba5eb5..0000000 --- a/libs/pmt-calendar/src/components/calendar-header/calendar-header.scss +++ /dev/null @@ -1,22 +0,0 @@ - -.calendar-header-container { - display: inline-flex; - justify-content: center; - justify-self: center; - width: 100%; - border: 1px solid #d3d3d3; - border-radius: 4px; - span { - padding: 1rem; - - } - button { - background-color: #fff; - padding: 1rem; - font-size: 1.25rem; - &.selected { - background-color: blue; - color: #fff; - } - } -} \ No newline at end of file diff --git a/libs/pmt-calendar/src/components/calendar-header/calendar-header.tsx b/libs/pmt-calendar/src/components/calendar-header/calendar-header.tsx deleted file mode 100644 index 9cad46a..0000000 --- a/libs/pmt-calendar/src/components/calendar-header/calendar-header.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import {Component, h, State} from '@stencil/core'; -import {CALENDAR_VIEW} from '../../models/calendar.const'; -import { CalendarView } from '../../models/calendar.types'; - -@Component({ - tag: 'pmt-calendar-header', - shadow: true, - styleUrl: './calendar-header.scss' -}) - -export class CalendarHeader { - - @State() - currentView: CalendarView = 'Month'; - - updateCurrentView(view: CalendarView) { - this.currentView = view; - } - - render() { - return ( -
- {Object.keys(CALENDAR_VIEW).map(key => { - return ( - - ); - })} -
- ); - } -} \ No newline at end of file diff --git a/libs/pmt-calendar/src/components/calendar-header/readme.md b/libs/pmt-calendar/src/components/calendar-header/readme.md deleted file mode 100644 index c6c9195..0000000 --- a/libs/pmt-calendar/src/components/calendar-header/readme.md +++ /dev/null @@ -1,23 +0,0 @@ -# pmt-calendar-month-header - - - - - - -## Dependencies - -### Used by - - - [pmt-calendar](../calendar) - -### Graph -```mermaid -graph TD; - pmt-calendar --> pmt-calendar-header - style pmt-calendar-header fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/libs/pmt-calendar/src/components/calendar-sub-header/readme.md b/libs/pmt-calendar/src/components/calendar-sub-header/readme.md new file mode 100644 index 0000000..4d49327 --- /dev/null +++ b/libs/pmt-calendar/src/components/calendar-sub-header/readme.md @@ -0,0 +1,10 @@ +# pmt-calendar-sub-header + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/libs/pmt-calendar/src/components/calendar/calendar.scss b/libs/pmt-calendar/src/components/calendar/calendar.scss index 72f5bf4..14357a4 100644 --- a/libs/pmt-calendar/src/components/calendar/calendar.scss +++ b/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; + } + } +} diff --git a/libs/pmt-calendar/src/components/calendar/calendar.tsx b/libs/pmt-calendar/src/components/calendar/calendar.tsx index 5905d7a..11c9ae9 100644 --- a/libs/pmt-calendar/src/components/calendar/calendar.tsx +++ b/libs/pmt-calendar/src/components/calendar/calendar.tsx @@ -1,5 +1,7 @@ -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', @@ -7,12 +9,49 @@ import { Component, h } from '@stencil/core'; }) 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 (
- -
+
+ {Object.keys(CALENDAR_VIEW).map(key => { + return ( + + ); + })} +
+ +
+

{this.currentSubTitle}

+
) diff --git a/libs/pmt-calendar/src/components/calendar/readme.md b/libs/pmt-calendar/src/components/calendar/readme.md index 2b81c5a..f1232d7 100644 --- a/libs/pmt-calendar/src/components/calendar/readme.md +++ b/libs/pmt-calendar/src/components/calendar/readme.md @@ -3,19 +3,6 @@ -## 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/)* diff --git a/package-lock.json b/package-lock.json index 9e7cf49..fc8274e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11098,9 +11098,9 @@ } }, "date-fns": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", - "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==" + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" }, "dayjs": { "version": "1.10.7", diff --git a/package.json b/package.json index 19c038e..b4b165b 100644 --- a/package.json +++ b/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",