.

components/Calendar.vue

@@ -7,7 +7,6 @@
       :attributes='attributes'
       :from-page.sync='page'
       is-expanded
-      show-clear-margin
       is-inline
       @dayclick='click')
 
@@ -15,7 +14,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import moment from 'dayjs'
-import { intersection } from 'lodash'
+import { intersection, sample, get } from 'lodash'
 
 export default {
   name: 'Calendar',
@@ -45,18 +44,19 @@ export default {
         order: event.start_datetime,
       }
       const day = moment(event.start_datetime).date()
-      let color = event.tags && event.tags.length && event.tags[0].color ? event.tags[0].color : 'rgba(170,170,250,0.7)'
-      if (event.past) color = 'rgba(200,200,200,0.5)'
+      let color = event.past ? 'rgba(200,200,200,0.5)' : get(event, 'tags[0].color') || 'rgba(170,170,250,0.7)'
+
+      console.error(color)
       if (event.multidate) {
         e.dates = {
           start: event.start_datetime, end: event.end_datetime
         }
-        e.highlight = { backgroundColor: color,
-          // borderColor: 'transparent',
-          borderWidth: '4px' }
+        e.highlight = { 
+          color: 'red' // : sample(['purple', 'red', 'green', 'blue']),
+        }
       } else {
         e.dates = event.start_datetime
-        e.dot = { backgroundColor: color, borderColor: color, borderWidth: '3px' }
+        e.dot = { color: 'rgba(102,10,20)' }
       }
       return e
     }
@@ -84,4 +84,11 @@ export default {
   align-self: center;
 }
 
+.vc-highlight {
+  /* color: red; */
+  height: 22px !important;
+  opacity: 0.4;
+  border-radius: 15px;
+}
+
 </style>

components/Home.vue

@@ -1,9 +1,14 @@
 <template lang="pug">
   section
 
+    a(href='#totop')
+      el-button.top.d-block.d-sm-none(icon='el-icon-top' circle type='primary' plain)
+    a.totop(name='totop')
     .row.m-0
+
       no-ssr
         Calendar.col-sm-12.col-lg-8.col-xl-6
+
       .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in filteredEvents')
         a(:id='event.newDay' v-if='event.newDay')
           .d-block.d-sm-none
@@ -20,14 +25,13 @@
 import { mapGetters } from 'vuex'
 import Event from '@/components/Event'
 import Calendar from '@/components/Calendar'
-import Search from '@/components/Search'
 
 export default {
   name: 'Home',
   data () {
     return { }
   },
-  components: { Calendar, Event, Search },
+  components: { Calendar, Event },
   computed: mapGetters(['filteredEvents']),
 }
 </script>
@@ -36,5 +40,19 @@ section {
   width: 100%;
   max-width: 1500px;
   margin: 0 auto;
+
+  .top {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1;
+    opacity: 0.7;
+    font-size: 16px;
+  }
+
+  .totop {
+    position: absolute;
+    top: 0px;
+  }
 }
 </style>

components/Search.vue

@@ -23,7 +23,6 @@
 
 <script>
 import {mapState, mapActions} from 'vuex'
-
 export default {
   data () {
     return {
@@ -35,10 +34,11 @@ export default {
   methods: mapActions(['setSearchPlaces', 'setSearchTags', 'showPastEvents']),
   computed: {
     ...mapState(['tags', 'places', 'filters', 'show_past_events']),
+    // TOFIX: optimize
     keywords () {
-      const tags = this.tags.map( t => ({ value: 't' + t.tag, label: t.tag, count: +t.eventsCount }))
-      const places = this.places.map( p => ({ value: 'p' + p.id, label: p.name, count: +p.eventsCount }))
-      return tags.concat(places)
+      const tags = this.tags.map( t => ({ value: 't' + t.tag, label: t.tag, weigth: t.weigth }))
+      const places = this.places.map( p => ({ value: 'p' + p.id, label: p.name, weigth: p.weigth }))
+      return tags.concat(places).sort((a, b) => b.weigth-a.weigth)
     },
     showPast : {
       set (value) {
@@ -59,24 +59,6 @@ export default {
         return this.filters.tags.map(t => 't' + t).concat(this.filters.places.map(p => 'p' + p))
       }
     },
-    filters_tags: {
-      set (value) {
-        this.setSearchTags(value)
-      },
-      get () {
-        return this.filters.tags
-      }
-    },
-    filters_places: {
-      set (value) {
-        this.setSearchPlaces(value)
-      },
-      get () {
-        return this.filters.places
-      }
-    },    
   }
 }
 </script>
-<style lang="less">
-</style>