restore range event on calendar

assets/helper.js

@@ -1,31 +1,45 @@
 import dayjs from 'dayjs'
 
-export function attributesFromEvents (_events) {
+export function attributesFromEvents(_events) {
 
   // const colors = ['teal', 'green', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
   // merge events with same date
   let attributes = []
   const now = dayjs().unix()
-  for(let e of _events) {
+  for (let e of _events) {
     const key = dayjs.unix(e.start_datetime).tz().format('YYYYMMDD')
-    const c = e.start_datetime < now ? 'vc-past' : ''
+    const c = (e.end_datetime || e.start_datetime) < now ? 'vc-past' : ''
+
+    if (e.multidate) {
+      attributes.push({
+        dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) },
+        highlight: {
+          start: { fillMode: 'outline' },
+          base: { fillMode: 'light' },
+          end: { fillMode: 'outline' },
+        }
+      })
+      continue
+    }
 
     const i = attributes.find(a => a.day === key)
     if (!i) {
-      attributes.push({ day: key, key: e.id, n: 1, dates: new Date(e.start_datetime * 1000),
+      attributes.push({
-        dot: { color: 'teal', class: c } })
+        day: key, key: e.id, n: 1, dates: new Date(e.start_datetime * 1000),
+        dot: { color: 'teal', class: c }
+      })
       continue
     }
 
     i.n++
-    if (i.n >= 20 ) {
+    if (i.n >= 20) {
       i.dot = { color: 'purple', class: c }
-    } else if ( i.n >= 10 ) {
+    } else if (i.n >= 10) {
-      i.dot = { color: 'red', class: c}
+      i.dot = { color: 'red', class: c }
-    } else if ( i.n >= 5 ) {
+    } else if (i.n >= 5) {
-      i.dot = { color: 'orange', class: c}
+      i.dot = { color: 'orange', class: c }
-    } else if ( i.n >= 3 ) {
+    } else if (i.n >= 3) {
-      i.dot = { color: 'yellow', class: c}
+      i.dot = { color: 'yellow', class: c }
     } else {
       i.dot = { color: 'teal', class: c }
     }