show events by default viewing past months

components/Calendar.vue

@@ -40,9 +40,9 @@ export default {
   },
   computed: {
     ...mapGetters(['filteredEventsWithPast']),
-    ...mapState(['tags', 'filters']),
+    ...mapState(['tags', 'filters', 'in_past']),
 
-    // TODO: should be better
+    // TODO: could be better
     attributes () {
       const colors = ['green', 'orange', 'yellow', 'teal', 'indigo', 'blue', 'red', 'purple', 'pink', 'grey']
       const tags = take(this.tags, 10).map(t => t.tag)
@@ -51,7 +51,7 @@ export default {
 
       const that = this
       function getColor (event) {
-        const color = { class: event.past && !that.filters.show_past_events ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
+        const color = { class: event.past && !that.filters.show_past_events && !that.in_past ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
         const tag = get(event, 'tags[0]')
         if (!tag) { return color }
         const idx = tags.indexOf(tag)

components/Home.vue

@@ -9,7 +9,7 @@
       Calendar
     .row.m-0
 
-      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in filteredEvents')
+      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in events')
         a(:id='event.newDay' v-if='event.newDay')
           .d-block.d-sm-none
             el-divider {{event.start_datetime|day}}
@@ -46,12 +46,12 @@ export default {
     }
   },
   components: { Calendar, Event },
-  data () {
-    return { }
-  },
   computed: {
-    ...mapGetters(['filteredEvents']),
-    ...mapState(['events', 'settings'])
+    events () {
+      return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
+    },
+    ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
+    ...mapState(['events', 'settings', 'in_past'])
   }
 }
 </script>