prev next works

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

@@ -2,6 +2,7 @@ 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';
+import { getNextView, getPrevView } from '../../utils/utils';
 @Component({
   tag: 'pmt-calendar',
   styleUrl: 'calendar.scss',
@@ -13,26 +14,49 @@ export class CalendarComponent {
   currentView: CalendarView = 'Month';
 
   @State()
-  currentSubTitle: string = format(new Date(new Date().getFullYear(), new Date().getMonth()), 'MMMM yyyy');
+  currentDate: Date = new Date();
+
+  handleGetNextView(): void {
+    const nextView = getNextView(this.currentView, this.currentDate);
+    this.currentDate = nextView;
+  }
+
+  handleGetPrevView(): void {
+    const nextView = getPrevView(this.currentView, this.currentDate);
+    this.currentDate = nextView;
+  }
 
   updateCurrentView(view: CalendarView) {
       this.currentView = view;
       const today = new Date();
       switch (view) {
         case 'Day': {
-          this.currentSubTitle = format(today, 'MMMM dd, yyyy');
+          this.currentDate = today;
           break;
         }
         case 'Year': {
-          this.currentSubTitle = format(today, 'yyyy');
+          this.currentDate = today;
           break;
         }
         default:
-          this.currentSubTitle = format(today, 'MMMM yyyy');
+          this.currentDate = today;
           break;
       }
   }
 
+  formatCurrentDate(): string {
+    switch (this.currentView) {
+      case 'Day': {
+        return format(this.currentDate, 'MMM dd, yyyy');
+      }
+      case 'Year': {
+        return format(this.currentDate, 'yyyy');
+      }
+      default:
+        return format(this.currentDate, 'MMM yyyy');
+    }
+  }
+
   render() {
     return (
       <section class="container">
@@ -48,11 +72,11 @@ export class CalendarComponent {
             })}
         </div>
         <div class="calendar-sub-header">
-          <h1>{this.currentSubTitle}</h1>
+          <h1>{this.formatCurrentDate()}</h1>
           <div class="move-view-container">
-              <button>{'<'}</button>
+              <button onClick={() => this.handleGetPrevView()}>{'<'}</button>
               <button>Today</button>
-              <button>{'>'}</button>
+              <button onClick={() => this.handleGetNextView()}>{'>'}</button>
 
           </div>
         </div>

libs/pmt-calendar/src/utils/utils.ts

@@ -1,5 +1,40 @@
-export function format(first: string, middle: string, last: string): string {
-  return (
-    (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '')
-  );
+import { addDays, addMonths, addWeeks, addYears, subDays, subMonths, subWeeks, subYears } from 'date-fns';
+import { CalendarView } from "../models/calendar.types";
+
+export function getNextView(currentView: CalendarView, currentDate: Date): Date {
+  switch (currentView) {
+    case 'Day': {
+      return addDays(currentDate, 1);
+    }
+    case 'Week': {
+      return addWeeks(currentDate, 1);
+    }
+    case 'Month': {
+      return addMonths(currentDate, 1);
+    }
+    case 'Year': {
+      return addYears(currentDate, 1);
+    }
+    default: 
+      return undefined;
+  }
+}
+
+export function getPrevView(currentView: CalendarView, currentDate: Date): Date {
+  switch (currentView) {
+    case 'Day': {
+      return subDays(currentDate, 1);
+    }
+    case 'Week': {
+      return subWeeks(currentDate, 1);
+    }
+    case 'Month': {
+      return subMonths(currentDate, 1);
+    }
+    case 'Year': {
+      return subYears(currentDate, 1);
+    }
+    default:
+      return undefined;
+  }
 }