cannot navigate to past months

taylorleh · Jun 15, 2017 · 2bf1b58 · 2bf1b58
1 parent 1caac39
commit 2bf1b58
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/client/vcustomers/src/components/eventCalendar/EventCalendar.vue b/client/vcustomers/src/components/eventCalendar/EventCalendar.vue
@@ -4,6 +4,8 @@
       v-on:prevMonth="prevMonth"
       v-on:nextMonth="nextMonth"
       :labels="dayLabels"
+      :currentYear="currentYear"
+      :currentMonth="currentMonth"
       :monthKey="month"
       :year="year">
     </calendar-header>
@@ -41,6 +43,7 @@
 
     data() {
       return {
+        currentYear: today.getFullYear(),
         currentMonth: today.getMonth(),
         currentDay: today.getDate()
       }

diff --git a/client/vcustomers/src/components/eventCalendar/components/CalendarHeader.vue b/client/vcustomers/src/components/eventCalendar/components/CalendarHeader.vue
@@ -2,7 +2,7 @@
   <div style="text-align:center;">
     <h2 style="text-align:center;">{{month}} {{year}}</h2>
     <div style="margin-bottom:1em;">
-      <button @click="prev" class="btn btn-default">&lsaquo;</button>
+      <button @click="previous" :disabled="disablePrevious()" class="btn btn-default">&lsaquo;</button>
       <button @click="next" class="btn btn-default">&rsaquo;</button>
     </div>
     <ul class="calendar-header-container">
@@ -17,17 +17,49 @@
 
   export default {
     name: 'CalendarHeader',
-    props: ['labels', 'monthKey', 'year'],
+
+    props: {
+      labels: {
+        required: true,
+        type: Array
+      },
+
+      currentYear: {
+        required: true,
+        type: Number
+      },
+
+      currentMonth: {
+        required: true,
+        type: Number
+      },
+
+      monthKey: {
+        required: true,
+        type: Number
+      },
+
+      year: {
+        required: true,
+        type: Number
+      }
+    },
+
     computed: {
       month() {
         return moment().month(this.monthKey).format('MMMM');
       }
     },
+
     methods: {
-      prev() {
-        this.$emit('prevMonth');
+      disablePrevious() {
+        return this.year <= this.currentYear && this.monthKey <= this.currentMonth;
+      },
 
+      previous() {
+        this.$emit('prevMonth');
       },
+
       next() {
         this.$emit('nextMonth');
       }