calendar attributes refactoring (a dot each days)

assets/helper.js

@@ -1,56 +1,39 @@
-import take from 'lodash/take'
-import get from 'lodash/get'
 import dayjs from 'dayjs'
 
-export function attributesFromEvents (_events, _tags) {
+export function attributesFromEvents (_events) {
-  const colors = ['blue', 'orange', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
-  const tags = take(_tags, 10).map(t => t.tag)
-  let attributes = []
-  attributes.push({ key: 'today', dates: new Date(), bar: { color: 'green', fillMode: 'outline' } })
-  const now = dayjs().unix()
 
-  function getColor (event, where) {
+  // const colors = ['teal', 'green', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
-    const color = { class: 'vc-rounded-full', color: 'blue', fillMode: where === 'base' ? 'light' : 'solid' }
+  // merge events with same date
-    const tag = get(event, 'tags[0]')
+  let attributes = []
-    if (event.start_datetime < now) {
+  const now = dayjs().unix()
-      if (event.multidate) {
+  for(let e of _events) {
-        color.fillMode = where === 'base' ? 'light' : 'outline'
+    const key = dayjs.unix(e.start_datetime).format('YYYYMMDD')
-        if (where === 'base') {
+    const c = e.start_datetime < now ? 'vc-past' : ''
-          color.class += ' vc-past'
+
-        }
+    const i = attributes.find(a => a.day === key)
-      } else {
+    if (!i) {
-        color.class += ' vc-past'
+      attributes.push({ day: key, key: e.id, n: 1, dates: new Date(e.start_datetime * 1000),
-      }
+        dot: { color: 'teal', class: c } })
+      continue
     }
-    if (!tag) { return color }
+
-    const idx = tags.indexOf(tag)
+    i.n++
-    if (idx < 0) { return color }
+    if (i.n >= 20 ) {
-    color.color = colors[idx]
+      i.dot = { color: 'purple', class: c }
-    // if (event.start_datetime < now) { color.class += ' vc-past' }
+    } else if ( i.n >= 10 ) {
-    return color
+      i.dot = { color: 'red', class: c}
+    } else if ( i.n >= 5 ) {
+      i.dot = { color: 'orange', class: c}
+    } else if ( i.n >= 3 ) {
+      i.dot = { color: 'yellow', class: c}
+    } else {
+      i.dot = { color: 'teal', class: c }
+    }
+
   }
 
-  attributes = attributes.concat(_events
+  // add a bar to highlight today
-    .filter(e => !e.multidate)
+  attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'green', fillMode: 'outline' } })
-    .map(e => {
-      return {
-        key: e.id,
-        dot: getColor(e),
-        dates: new Date(e.start_datetime * 1000)
-      }
-    }))
-
-  attributes = attributes.concat(_events
-    .filter(e => e.multidate)
-    .map(e => ({
-      key: e.id,
-      highlight: {
-        start: getColor(e),
-        base: getColor(e, 'base'),
-        end: getColor(e)
-      },
-      dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) }
-    })))
 
   return attributes
 }

components/Calendar.vue

@@ -16,7 +16,7 @@
 
 </template>
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 import dayjs from 'dayjs'
 import { attributesFromEvents } from '../assets/helper'
 
@@ -34,13 +34,12 @@ export default {
     }
   },
   computed: {
-    ...mapState(['tags', 'filters', 'in_past', 'settings']),
+    ...mapState(['settings']),
     attributes () {
-      return attributesFromEvents(this.events, this.tags)
+      return attributesFromEvents(this.events)
     }
   },
   methods: {
-    ...mapActions(['updateEvents', 'showPastEvents']),
     updatePage (page) {
         this.$emit('monthchange', page)
     },