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 ( -
{this.currentDate.toLocaleDateString()}
+
+
+ {this.DAYS_OF_WEEK.map(dow => { + return ( +
{dow}
+ ); + })} +
+
); } } \ 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