color, weigth, locale, config

components/Calendar.vue

@@ -14,7 +14,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import moment from 'dayjs'
-import { intersection, sample, get } from 'lodash'
+import { intersection, sample, take, get } from 'lodash'
 
 export default {
   name: 'Calendar',
@@ -40,17 +40,34 @@ export default {
   },
   computed: {
     ...mapGetters(['filteredEvents']),
+    ...mapState(['tags']),
     attributes () {
+      const colors = ['indigo', 'orange', 'yellow', 'green', 'teal', 'blue', 'red', 'purple', 'pink', 'grey']
+      const tags = take(this.tags, 10).map(t=>t.tag)
+      // const tags = [this.tags[0].tag, this.tags[1].tag, this.tags[2].tag, this.tags[3].tag, this.tags[4].tag, this.tags[5].tag ]
       let attributes = []
       attributes.push ({ key: 'today', dates: new Date(), highlight: { color: 'green' }})
 
+      function getColor(event) {
+        const color = { class: event.past ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
+        const tag = get(event, 'tags[0].tag')
+        if (!tag) return color
+        const idx = tags.indexOf(tag)
+        if (idx<0) return color
+        color.color = colors[idx]
+        return color
+      }
+
       attributes = attributes.concat(this.filteredEvents
         .filter(e => !e.multidate)
-        .map(e => ({ key: e.id, dot: {}, dates: new Date(e.start_datetime*1000)})))
+        .map(e => ({
+          key: e.id, 
+          dot: getColor(e),
+          dates: new Date(e.start_datetime*1000)})))
 
       attributes = attributes.concat(this.filteredEvents
         .filter(e => e.multidate)
-        .map( e => ({ key: e.id, highlight: {}, dates: { 
+        .map( e => ({ key: e.id, highlight: getColor(e), dates: { 
           start: new Date(e.start_datetime*1000), end: new Date(e.end_datetime*1000) }})))
           
       return attributes
@@ -76,4 +93,7 @@ export default {
   border-radius: 15px;
 } */
 
+.past-event {
+  opacity: 0.2;
+}
 </style>

components/Home.vue

@@ -4,11 +4,12 @@
     a(href='#totop')
       el-button.top.d-block.d-sm-none(icon='el-icon-top' circle type='primary' plain)
     a.totop(name='totop')
+    //- el-backtop(target='#home')
     no-ssr
       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 filteredEvents' v-if='!event.past')
         a(:id='event.newDay' v-if='event.newDay')
           .d-block.d-sm-none
             el-divider {{event.start_datetime|day}}

components/List.vue

@@ -4,6 +4,7 @@ div#list
   el-timeline
     el-timeline-item(
       v-for='event in events'
+      v-if='!event.past'
       :key='event.id'
       :timestamp='event|event_when'
       placement='top' icon='el-icon-arrow-down' size='large'