- Enable Edit Event into dialog form ... (and save to the db)

- Add Where table

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -33,97 +33,6 @@ import { GlobalStore } from '../../store/Modules'
   components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller }
 })
 export default class CEventsCalendar extends Vue {
-  public $t: any
-  public $q
-  public calendarView = 'month'
-  public selectedDate = '2019-04-01'
-  public formDefault = {
-    title: '',
-    details: '',
-    allDay: false,
-    dateTimeStart: '',
-    dateTimeEnd: '',
-    icon: '',
-    bgcolor: '#0000FF'
-  }
-
-  public formbookEventDefault: IBookedEvent = {
-    userId: '',
-    msgbooking: '',
-    infoevent: '',
-    numpeople: 1,
-    datebooked: tools.getDateNow(),
-    booked: false,
-    modified: false
-  }
-
-  public mioalert = false
-
-  public dateFormatter: any = ''
-  public titleFormatter: any = null
-
-  public keyValue = 0
-  public direction = 'forward'
-  public weekdays = [1, 2, 3, 4, 5, 6, 0]
-  public viewOptions = [
-    { label: 'Day', value: 'day' },
-    { label: '5 Day', value: '5day' },
-    { label: 'Week', value: 'week' },
-    { label: 'Month', value: 'month' }
-  ]
-  public addEvent = false
-  public bookEventpage: IBookedEventPage = {
-    show: false,
-    bookedevent: null,
-    state: EState.None
-  }
-
-  public contextDay = null
-  public eventForm = { ...this.formDefault }
-  public bookEventForm = { ...this.formbookEventDefault }
-  public displayEvent = false
-  public myevent = null
-  // public events = []
-  public gmt = ''
-  public dragging = false
-  public draggedEvent = null
-  public ignoreNextSwipe = false
-  public showDateScrollerAllDay = false
-  public showDateTimeScrollerStart = false
-  public showDateTimeScrollerEnd = false
-
-  @Watch('locale')
-  public checkloc() {
-    this.updateFormatters()
-  }
-
-  public resources = [
-    {
-      label: 'John'
-    },
-    {
-      label: 'Mary'
-    },
-    {
-      label: 'Susan'
-    },
-    {
-      label: 'Olivia'
-    },
-    {
-      label: 'Board Room'
-    },
-    {
-      label: 'Room-1'
-    },
-    {
-      label: 'Room-2'
-    }
-  ]
-
-  public $refs: {
-    calendar: any
-  }
 
   // public eventdata =
   //   [
@@ -268,26 +177,6 @@ export default class CEventsCalendar extends Vue {
     return CalendarStore.state.editable
   }
 
-  public mounted() {
-    this.selectedDate = this.formatDate(tools.getDateNow())
-    this.$root.$on('calendar:next', this.calendarNext)
-    this.$root.$on('calendar:prev', this.calendarPrev)
-    this.$root.$on('calendar:today', this.calendarToday)
-    // CalendarStore.state.eventlist = events
-    this.updateFormatters()
-  }
-
-  public beforeMount() {
-    CalendarStore.state.locale = toolsext.getLocale()
-    this.updateFormatters()
-  }
-
-  public beforeDestroy() {
-    this.$root.$off('calendar:next', this.calendarNext)
-    this.$root.$off('calendar:prev', this.calendarPrev)
-    this.$root.$off('calendar:today', this.calendarToday)
-  }
-
   get containerStyle() {
     const styles = { height: '' }
     if (this.calendarView !== 'month' || (this.calendarView === 'month' && CalendarStore.state.dayHeight === 0)) {
@@ -300,15 +189,15 @@ export default class CEventsCalendar extends Vue {
   get eventsMap() {
     // console.log('eventsMap')
     const map = {}
-    CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.date] = map[myevent.date] || []).push(myevent))
+    CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.dateTimeStart.toDateString()] = map[myevent.dateTimeStart.toDateString()] || []).push(myevent))
     return map
   }
 
   get addOrUpdateEvent() {
     if (this.contextDay && this.contextDay.bgcolor) {
-      return 'Update'
+      return this.$t('dialog.update')
     }
-    return 'Add'
+    return this.$t('dialog.add')
   }
 
   get scrollerPopupStyle160() {
@@ -341,6 +230,156 @@ export default class CEventsCalendar extends Vue {
     }
   }
 
+  get tools() {
+    return tools
+  }
+
+  get toolsext() {
+    return toolsext
+  }
+
+  get func_tools() {
+    return func_tools
+  }
+
+  get hasModifiedBooking() {
+    return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
+      (this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking) ||
+      (this.bookEventpage.bookedevent.booked !== this.bookEventForm.booked)
+  }
+
+  get static_data() {
+    return static_data
+  }
+
+  get EState() {
+    return EState
+  }
+
+  get checkseinviaMsg() {
+    return (this.bookEventpage.state === EState.Creating) && (!this.bookEventForm.booked)
+  }
+
+  get getTitleBtnBooking() {
+    if (this.bookEventpage.state === EState.Creating) {
+      return this.$t('dialog.book')
+    } else {
+      return this.$t('dialog.update')
+    }
+  }
+
+  get mythis() {
+    return this
+  }
+  public $t: any
+  public $q
+  public calendarView = 'month'
+  public selectedDate = '2019-04-01'
+  public formDefault: IEvents = {
+    title: '',
+    details: '',
+    icon: '',
+    bgcolor: '#0000FF'
+  }
+
+  public formbookEventDefault: IBookedEvent = {
+    userId: '',
+    msgbooking: '',
+    infoevent: '',
+    numpeople: 1,
+    datebooked: tools.getDateNow(),
+    booked: false,
+    modified: false
+  }
+
+  public mioalert = false
+
+  public dateFormatter: any = ''
+  public titleFormatter: any = null
+
+  public keyValue = 0
+  public direction = 'forward'
+  public weekdays = [1, 2, 3, 4, 5, 6, 0]
+  public viewOptions = [
+    { label: 'Day', value: 'day' },
+    { label: '5 Day', value: '5day' },
+    { label: 'Week', value: 'week' },
+    { label: 'Month', value: 'month' }
+  ]
+  public addEvent = false
+  public bookEventpage: IBookedEventPage = {
+    show: false,
+    bookedevent: null,
+    state: EState.None
+  }
+
+  public contextDay = null
+  public eventForm = { ...this.formDefault }
+  public bookEventForm = { ...this.formbookEventDefault }
+  public displayEvent = false
+  public myevent = null
+  // public events = []
+  public gmt = ''
+  public dragging = false
+  public draggedEvent = null
+  public ignoreNextSwipe = false
+  public showDateScrollerAllDay = false
+  public showDateTimeScrollerStart = false
+  public showDateTimeScrollerEnd = false
+
+  public resources = [
+    {
+      label: 'John'
+    },
+    {
+      label: 'Mary'
+    },
+    {
+      label: 'Susan'
+    },
+    {
+      label: 'Olivia'
+    },
+    {
+      label: 'Board Room'
+    },
+    {
+      label: 'Room-1'
+    },
+    {
+      label: 'Room-2'
+    }
+  ]
+
+  public $refs: {
+    calendar: any
+  }
+
+  @Watch('locale')
+  public checkloc() {
+    this.updateFormatters()
+  }
+
+  public mounted() {
+    this.selectedDate = this.formatDate(tools.getDateNow())
+    this.$root.$on('calendar:next', this.calendarNext)
+    this.$root.$on('calendar:prev', this.calendarPrev)
+    this.$root.$on('calendar:today', this.calendarToday)
+    // CalendarStore.state.eventlist = events
+    this.updateFormatters()
+  }
+
+  public beforeMount() {
+    CalendarStore.state.locale = toolsext.getLocale()
+    this.updateFormatters()
+  }
+
+  public beforeDestroy() {
+    this.$root.$off('calendar:next', this.calendarNext)
+    this.$root.$off('calendar:prev', this.calendarPrev)
+    this.$root.$off('calendar:today', this.calendarToday)
+  }
+
   public showEvent(eventparam: IEvents) {
     // console.log('showEvent - INIZIO')
     this.myevent = eventparam
@@ -348,13 +387,6 @@ export default class CEventsCalendar extends Vue {
     // console.log('showEvent - FINE ' + myevent)
   }
 
-  public getEndTime(eventparam) {
-    let endTime = new Date(eventparam.date)
-    endTime = date.addToDate(endTime, { minutes: eventparam.dur })
-    endTime = date.formatDate(endTime, 'HH:mm')
-    return endTime
-  }
-
   public onDateChanged(mydate) {
     this.calendarView = 'day'
   }
@@ -378,18 +410,7 @@ export default class CEventsCalendar extends Vue {
     }
     this.resetForm()
     this.contextDay = { ...day }
-    let timestamp
+
-    if (this.contextDay.hasTime === true) {
-      timestamp = this.getTimestamp(this.adjustTimestamp(this.contextDay))
-      const startTime = new Date(timestamp)
-      const endTime = date.addToDate(startTime, { hours: 1 })
-      this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
-    } else {
-      timestamp = this.contextDay.date + ' 00:00'
-    }
-    this.eventForm.dateTimeStart = timestamp
-    this.eventForm.allDay = this.contextDay.hasTime === false
-    this.eventForm.bgcolor = '#0000FF' // starting color
     this.addEvent = true // show dialog
   }
 
@@ -420,22 +441,12 @@ export default class CEventsCalendar extends Vue {
     console.log('editEvent - INIZIO')
     this.resetForm()
     this.contextDay = { ...eventparam }
-    let timestamp
+
-    if (eventparam.withtime) {
+    this.eventForm =  {... eventparam }
-      timestamp = eventparam.date
+
-      const startTime = new Date(timestamp)
+    this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(eventparam.dateTimeStart)
-      const endTime = date.addToDate(startTime, { minutes: eventparam.dur })
+    this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(eventparam.dateTimeEnd)
-      this.eventForm.dateTimeStart = this.formatDate(startTime) + ' ' + this.formatTime(startTime) // endTime.toString()
+
-      this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
-    } else {
-      timestamp = eventparam.date
-      this.eventForm.dateTimeStart = timestamp
-    }
-    this.eventForm.allDay = !eventparam.withtime
-    this.eventForm.bgcolor = eventparam.bgcolor
-    this.eventForm.icon = eventparam.icon
-    this.eventForm.title = eventparam.title
-    this.eventForm.details = eventparam.details
     this.addEvent = true // show dialog
   }
 
@@ -450,7 +461,8 @@ export default class CEventsCalendar extends Vue {
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
       if (eventparam.title === CalendarStore.state.eventlist[i].title &&
         eventparam.details === CalendarStore.state.eventlist[i].details &&
-        eventparam.date === CalendarStore.state.eventlist[i].date) {
+        eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
+        eventparam.dateTimeEnd === CalendarStore.state.eventlist[i].dateTimeEnd) {
         return i
       }
     }
@@ -471,18 +483,6 @@ export default class CEventsCalendar extends Vue {
     return [year, tools.padTime(month), tools.padTime(day)].join('-')
   }
 
-  get tools() {
-    return tools
-  }
-
-  get toolsext() {
-    return toolsext
-  }
-
-  get func_tools() {
-    return func_tools
-  }
-
   public formatTime(mydate) {
     const d = mydate !== void 0 ? new Date(mydate) : new Date(),
       hours = '' + d.getHours(),
@@ -514,21 +514,8 @@ export default class CEventsCalendar extends Vue {
       } else {
         // an add
       }
-      const data: IEvents = {
+      const data = { ...form }
-        withtime: false,
+
-        dur: 0,
-        dur2: 0,
-        title: form.title,
-        details: form.details,
-        icon: form.icon,
-        bgcolor: form.bgcolor,
-        date: String(form.dateTimeStart).slice(0, 10).replace(/\//g, '-')
-      }
-      if (form.allDay === false) {
-        // get time into separate var
-        // data.time = String(form.dateTimeStart).slice(11, 16)
-        data.dur = self.getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
-      }
       if (update === true) {
         const index = self.findEventIndex(self.contextDay)
         if (index >= 0) {
@@ -541,6 +528,27 @@ export default class CEventsCalendar extends Vue {
         CalendarStore.state.eventlist.push(data)
       }
 
+      // ++Save into the Database
+      const mydatatosave = {
+        id: data._id,
+        table: 'myevents',
+        fieldsvalue: data
+      }
+
+      GlobalStore.actions.saveFieldValue(mydatatosave).then((esito) => {
+        if (esito) {
+          tools.showPositiveNotif(this.$q, this.$t('db.recupdated'))
+        } else {
+          tools.showNegativeNotif(this.$q, this.$t('db.recfailed'))
+          // Undo...
+          const index = self.findEventIndex(self.contextDay)
+          if (index >= 0) {
+            // @ts-ignore
+            CalendarStore.state.eventlist.splice(index, 1, { ...self.contextDay })
+          }
+        }
+      })
+
       self.contextDay = null
     }
   }
@@ -565,12 +573,6 @@ export default class CEventsCalendar extends Vue {
     this.bookEventpage.show = true
   }
 
-  get hasModifiedBooking() {
-    return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
-      (this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking) ||
-      (this.bookEventpage.bookedevent.booked !== this.bookEventForm.booked)
-  }
-
   public sendMsg(myevent: IEvents) {
     // ..
   }
@@ -608,23 +610,14 @@ export default class CEventsCalendar extends Vue {
     }
   }
 
-  public showOffset(days) {
-    if (days.length === 0) return
-
-    let val = ''
-    val = tools.padTime(new Date(this.getTimestamp(days[0])).getTimezoneOffset() / 60)
-    if (Number.isNaN(Number(val))) return ''
-    return 'GMT-' + val
-  }
-
   public adjustTimestamp(day) {
     day.minute = day.minute < 15 || day.minute >= 45 ? 0 : 30
     return day
   }
 
-  public getTimestamp(day) {
+  // public getTimestamp(day) {
-    return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
+  //   return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
-  }
+  // }
 
   public updateFormatters() {
     try {
@@ -682,11 +675,11 @@ export default class CEventsCalendar extends Vue {
   public onDragOver(ev, day, type) {
     if (type === 'day') {
       stopAndPrevent(ev)
-      return this.draggedEvent.date !== day.date
+      return this.draggedEvent.dateTimeStart !== day.dateTimeStart
     } else if (type === 'interval') {
       stopAndPrevent(ev)
       // return this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
-      return this.draggedEvent.date !== day.date
+      return this.draggedEvent.dateTimeStart !== day.dateTimeStart
     }
   }
 
@@ -694,10 +687,10 @@ export default class CEventsCalendar extends Vue {
     ev.preventDefault()
     ev.stopPropagation()
     if (type === 'day') {
-      this.draggedEvent.date = day.date
+      this.draggedEvent.dateTimeStart = day.dateTimeStart
       this.draggedEvent.side = void 0
     } else if (type === 'interval') {
-      this.draggedEvent.date = day.date
+      this.draggedEvent.dateTimeStart = day.dateTimeStart
       // this.draggedEvent.time = day.time
       this.draggedEvent.side = void 0
     }
@@ -720,19 +713,27 @@ export default class CEventsCalendar extends Vue {
   }
 
   public getEventDate(eventparam) {
-    const parts = eventparam.date.split('-')
+    const parts = eventparam.dateTimeStart.split('-')
     const mydate = new Date(parts[0], parts[1] - 1, parts[2])
     return this.dateFormatter.format(mydate)
   }
 
   public getTeacherName(teacherusername) {
-    const op = CalendarStore.state.operators.find((myop) => myop.username === teacherusername)
+    return CalendarStore.getters.getTeacherName(teacherusername)
-    return (op) ? `${op.name} ${op.surname}` : ''
+  }
+
+  public getWhereIcon(where) {
+    const whererec = CalendarStore.getters.getWhereRec(where)
+    return (whererec) ? whererec.whereicon : ''
+  }
+  public getWhereName(where) {
+    const whererec = CalendarStore.getters.getWhereRec(where)
+    return (whererec) ? whererec.placename : ''
   }
 
   public getTeacherImg(teacherusername) {
-    const op = CalendarStore.state.operators.find((myop) => myop.username === teacherusername)
+    const teacher = CalendarStore.getters.getTeacher(teacherusername)
-    return (op) ? op.img : 'avatar/noimage.png'
+    return (teacher) ? teacher.img : ''
   }
 
   public badgeClasses(eventparam, type) {
@@ -754,10 +755,10 @@ export default class CEventsCalendar extends Vue {
       s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
     }
     if (timeStartPos) {
-      s.top = timeStartPos(tools.getstrTime(eventparam.date)) + 'px'
+      s.top = timeStartPos(tools.getstrTime(eventparam.dateTimeStart)) + 'px'
     }
     if (timeDurationHeight) {
-      s.height = timeDurationHeight(eventparam.dur) + 'px'
+      s.height = timeDurationHeight(this.func_tools.getMinutesDuration(eventparam.dateTimeStart, eventparam.dateTimeEnd)) + 'px'
     }
     s['align-items'] = 'flex-start'
     return s
@@ -798,7 +799,7 @@ export default class CEventsCalendar extends Vue {
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
       // console.log('  ciclo i = ', i, CalendarStore.state.eventlist[i])
       // const dateEvent = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
-      const dateEvent = new Date(CalendarStore.state.eventlist[i].date)
+      const dateEvent = new Date(CalendarStore.state.eventlist[i].dateTimeEnd)
 
       if (dateEvent >= datenow) {
         eventsloc.push(CalendarStore.state.eventlist[i])
@@ -813,20 +814,16 @@ export default class CEventsCalendar extends Vue {
 
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
       let added = false
-      // console.log('  ciclo i = ', i, CalendarStore.state.eventlist[i])
+      if (tools.getstrYYMMDDDate(CalendarStore.state.eventlist[i].dateTimeStart) === dt) {
-      if (tools.getstrYYMMDDDate(CalendarStore.state.eventlist[i].date) === dt) {
-        // if (CalendarStore.state.eventlist[i].time) {
         if (eventsloc.length > 0) {
           // check for overlapping times
-            // const startTime = new Date(CalendarStore.state.eventlist[i].date + ' ' + CalendarStore.state.eventlist[i].time)
+          const startTime = CalendarStore.state.eventlist[i].dateTimeStart
-            const startTime = new Date(CalendarStore.state.eventlist[i].date)
+          const endTime = CalendarStore.state.eventlist[i].dateTimeEnd
-            const endTime = date.addToDate(startTime, { minutes: CalendarStore.state.eventlist[i].dur })
           for (let j = 0; j < eventsloc.length; ++j) {
-              const startTime2 = new Date(eventsloc[j].date)
+            const startTime2 = eventsloc[j].dateTimeStart
-              const endTime2 = date.addToDate(startTime2, { minutes: eventsloc[j].dur2 })
+            const endTime2 = eventsloc[j].dateTimeEnd
             if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
               eventsloc[j].side = 'left'
-                // CalendarStore.state.eventlist[i].side = 'right'
               eventsloc.push(CalendarStore.state.eventlist[i])
               added = true
               break
@@ -838,12 +835,9 @@ export default class CEventsCalendar extends Vue {
           // CalendarStore.state.eventlist[i].side = void 0
           eventsloc.push(CalendarStore.state.eventlist[i])
         }
-      } else if (CalendarStore.state.eventlist[i].days) {
+      } else if (func_tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
         // check for overlapping dates
-        // const startDate = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
+        if (date.isBetweenDates(dt, CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
-        const startDate = new Date(CalendarStore.state.eventlist[i].date)
-        const endDate = date.addToDate(startDate, { days: CalendarStore.state.eventlist[i].days })
-        if (date.isBetweenDates(dt, startDate, endDate)) {
           eventsloc.push(CalendarStore.state.eventlist[i])
           added = true
         }
@@ -852,41 +846,10 @@ export default class CEventsCalendar extends Vue {
     return eventsloc
   }
 
-  get static_data() {
-    return static_data
-  }
-
-  get EState() {
-    return EState
-  }
-
-  get checkseinviaMsg() {
-    return (this.bookEventpage.state === EState.Creating) && (!this.bookEventForm.booked)
-  }
-
-  get getTitleBtnBooking() {
-    if (this.bookEventpage.state === EState.Creating) {
-        return this.$t('dialog.book')
-    } else {
-      return this.$t('dialog.update')
-    }
-  }
-
-  get mythis() {
-    return this
-  }
-
   public isEventEnabled(myevent) {
     // check if event is in the past
     const datenow = tools.addDays(tools.getDateNow(), -1)
 
-    // let dateEvent = new Date(myevent.date + ' 00:00:00')
+    return (myevent.dateTimeEnd >= datenow)
-    let dateEvent = new Date(myevent.date)
-
-    if (myevent.days) {
-      dateEvent = tools.addDays(dateEvent, myevent.days)
-    }
-
-    return (dateEvent >= datenow)
   }
 }

src/components/CEventsCalendar/CEventsCalendar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="landing">
-        <q-page class="column">
+        <q-page class="column" style="min-height: 500px !important;">
             <!-- display an myevent -->
             <q-dialog v-model="displayEvent">
                 <q-card v-if="myevent">
@@ -21,7 +21,7 @@
                                style="height: 150px;">
                         </q-img>
                         <div style="margin-top: 150px;">
-                            <div v-if="myevent.allDay" class="text-caption">{{ getEventDate(myevent) }}</div>
+                            <!--<div v-if="myevent.allday" class="text-caption">{{ getEventDate(myevent) }}</div>-->
 
                             <div class="cal__title">{{myevent.title}}</div>
                             <div class="cal__details" v-html="myevent.details"></div>
@@ -36,7 +36,8 @@
                                             </q-avatar>
                                             <span class="cal__teacher-content">{{getTeacherName(myevent.teacher)}}</span>
                                         </q-chip>
-                                        <span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2" class="margin_avatar2"></span>
+                                        <span v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2"
+                                              class="margin_avatar2"></span>
                                         <q-chip v-if="getTeacherImg(myevent.teacher2) && myevent.teacher2">
                                             <q-avatar>
                                                 <img :src="`../../statics/images/` + getTeacherImg(myevent.teacher2)">
@@ -45,34 +46,36 @@
                                         </q-chip>
                                     </span>
                             </div>
-                            <div v-if="myevent.where" class="cal__where">
+                            <div v-if="myevent.wherecode" class="cal__where">
                                 <span v-if="tools.isMobile()"><br/></span>
                                 <span class="cal__where-title">{{$t('cal.where')}}: </span>
                                 <span class="cal__where-content">
                                         <q-chip>
-                                            <q-avatar v-if="myevent.whereicon">
+                                            <q-avatar v-if="getWhereIcon(myevent.wherecode)">
-                                                <img :src="`../../statics/images/avatar/` + myevent.whereicon">
+                                                <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
                                             </q-avatar>
                                             <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
                                             </q-avatar>
-                                            <span class="cal__teacher-content">{{myevent.where}}</span>
+                                            <span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
                                         </q-chip>
                                     </span>
                             </div>
-                            <div v-if="myevent.date" class="cal__when">
+                            <div v-if="myevent.dateTimeStart" class="cal__when">
                                 <span class="cal__where-title">{{$t('cal.when')}}: </span>
-                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
+                                <span class="cal__where-content">{{ tools.getstrDate(myevent.dateTimeStart)}} - {{ tools.getstrDate(myevent.dateTimeEnd)}}</span>
-                                <span v-if="myevent.days > 1" class="cal__where-content"> - {{func_tools.getDateStr(tools.addDays(myevent.date, myevent.days - 1))}}<br/></span>
+
                                 <span v-if="myevent.infoextra" class="cal__hours">
                                         <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
                                         <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
                                     </span>
                                 <span v-else>
-                                        <span v-if="myevent.withtime" class="cal__hours">
+                                        <span v-if="!func_tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
+                                              class="cal__hours">
                                              -
                                             <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ tools.getstrTime(myevent.date) }} {{$t('cal.endtime')}}: {{
+                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ tools.getstrTime(myevent.dateTimeStart) }}
-                                        getEndTime(myevent) }}</span>
+                                                <span v-if="myevent.dateTimeEnd">{{ $t('cal.endtime')}}: {{ tools.getstrTime(myevent.dateTimeEnd) }}</span>
+                                            </span>
                                         </span>
                                     </span>
                             </div>
@@ -92,13 +95,13 @@
                     </q-card-actions>
                 </q-card>
             </q-dialog>
-            <!-- add/edit an myevent -->
+            <!-- id_bookedeventadd/edit an myevent -->
 
             <q-dialog v-model="addEvent" no-backdrop-dismiss>
                 <q-card v-if="addEvent" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
                     <q-toolbar class="bg-primary text-white">
                         <q-toolbar-title>
-                            {{ addOrUpdateEvent }} Event
+                            {{ addOrUpdateEvent }} {{ $t('cal.event') }}
                         </q-toolbar-title>
                         <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
                     </q-toolbar>
@@ -111,36 +114,11 @@
                                      :rules="[v => v && v.length > 0 || 'Field cannot be empty']"></q-input>
                             <q-input type="textarea" v-model="eventForm.details"
                                      :label="$t('cal.details')"></q-input>
-                            <q-checkbox v-model="eventForm.allDay" :label="$t('cal.alldayevent')"></q-checkbox>
+                            <!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
 
-                            <q-input v-if="eventForm.allDay" color="blue-6" filled
+                            <div class="q-gutter-sm">
-                                     v-model="eventForm.dateTimeStart"
-                                     :label="$t('cal.enterdate')" mask="####-##-##">
-                                <template #append>
-                                    <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy v-model="showDateScrollerAllDay">
-                                            <q-date-scroller
-                                                    v-model="eventForm.dateTimeStart"
-                                                    :locale="locale"
-                                                    :hour24-format="true"
-                                                    :rounded-borders="true"
-                                                    border-color="#2196f3"
-                                                    bar-color="#2196f3"
-                                                    color="white"
-                                                    background-color="primary"
-                                                    inner-color="primary"
-                                                    inner-background-color="white"
-                                                    :style="scrollerPopupStyle160"
-                                                    @close="() => { showDateScrollerAllDay = false }"
-                                            />
-                                        </q-popup-proxy>
-                                    </q-icon>
-                                </template>
-                            </q-input>
-
-                            <div v-else class="q-gutter-sm">
                                 <q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
-                                         :label="$t('cal.enterdate')" mask="####-##-## ##:##">
+                                         :label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##">
                                     <template #append>
                                         <q-icon name="event" class="cursor-pointer">
                                             <q-popup-proxy v-model="showDateTimeScrollerStart">
@@ -191,13 +169,15 @@
                                 </q-input>
                             </div>
 
-                            <q-input v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
+                            <q-input dense v-model="eventForm.teacher" :label="$t('event.teacher')"></q-input>
+                            <q-input dense v-model="eventForm.teacher2" :label="$t('event.teacher2')"></q-input>
 
-                            <q-input v-model="eventForm.icon" label="Icon"></q-input>
+                            <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
+
+                            <q-input dense v-model="eventForm.icon" label="Icon"></q-input>
                             <q-input
                                     filled
-                                    v-model="eventForm.bgcolor"
+                                    v-model="eventForm.bgcolor">
-                            >
                                 <template #append>
                                     <q-icon name="colorize" class="cursor-pointer">
                                         <q-popup-proxy>
@@ -206,6 +186,22 @@
                                     </q-icon>
                                 </template>
                             </q-input>
+
+                            <q-input dense v-model="eventForm.img" :label="$t('event.img')"></q-input>
+                            <q-input dense v-model="eventForm.img_small" :label="$t('event.img_small')"></q-input>
+                            <q-input dense v-model="eventForm.wherecode" :label="$t('event.where')"></q-input>
+                            <q-input dense v-model="eventForm.contribtype" :label="$t('event.contribtype')"></q-input>
+                            <q-input dense v-model="eventForm.price" :label="$t('event.price')"></q-input>
+                            <q-input dense v-model="eventForm.infoafterprice" :label="$t('event.infoafterprice')"></q-input>
+
+                            <q-input dense v-model="eventForm.linkpage" :label="$t('event.linkpage')"></q-input>
+                            <q-input dense v-model="eventForm.linkpdf" :label="$t('event.linkpdf')"></q-input>
+                            <q-checkbox dense v-model="eventForm.news" :label="$t('event.news')"></q-checkbox>
+                            <q-checkbox dense v-model="eventForm.nobookable" :label="$t('event.nobookable')"></q-checkbox>
+                            <q-checkbox dense v-model="eventForm.canceled" :label="$t('event.canceled')"></q-checkbox>
+
+
+
                         </q-form>
                     </q-card-section>
                     <q-card-actions align="right">
@@ -230,33 +226,44 @@
                                style="height: 150px;">
                         </q-img>
                         <div style="margin-top: 150px;">
-                            <div v-if="myevent.allDay" class="text-caption">{{ getEventDate(myevent) }}</div>
 
                             <div class="cal__title">{{myevent.title}}</div>
-                            <div v-if="myevent.date" class="cal__when">
+                            <div v-if="myevent.dateTimeStart" class="cal__when">
                                 <span class="cal__where-title">{{$t('cal.when')}}: </span>
-                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
+                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.dateTimeStart)}}</span>
-                                <span v-if="myevent.days > 1" class="cal__where-content"> - {{func_tools.getDateStr(tools.addDays(myevent.date, myevent.days - 1))}}<br/></span>
+                                <span v-if="func_tools.hasManyDays(myevent.dateTimeStart)" class="cal__where-content"> - {{func_tools.getDateStr(myevent.dateTimeEnd)}}<br/></span>
                                 <span v-if="myevent.infoextra" class="cal__hours">
                                         <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
                                         <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
                                     </span>
                                 <span v-else>
-                                        <span v-if="myevent.withtime" class="cal__hours">
+                                        <span v-if="!func_tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
+                                              class="cal__hours">
                                              -
                                             <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
-                                            <span class="cal__hours-content"><span v-if="!tools.isMobile()">{{$t('cal.starttime')}} </span>{{ tools.getstrTime(myevent.date) }} <span v-if="!tools.isMobile()">{{$t('cal.endtime')}} </span><span v-else> - </span> {{
+                                            <span class="cal__hours-content"><span v-if="!tools.isMobile()">{{$t('cal.starttime')}} </span>{{ tools.getstrTime(myevent.dateTimeStart) }}
-                                                getEndTime(myevent) }}</span>
+                                                <span v-if="myevent.dateTimeEnd">
+                                                    <span v-if="!tools.isMobile()">
+                                                    {{$t('cal.endtime')}}
+                                                    </span>
+                                                    <span v-else> - </span>
+                                                    {{ tools.getstrTime(myevent.dateTimeEnd) }}
+                                                </span>
+                                            </span>
                                         </span>
                                     </span>
                             </div>
                             <div class="q-pa-xs">
                                 <q-card class="text-white windowcol">
                                     <q-card-section>
-                                        <q-checkbox :disable="((bookEventpage.bookedevent && bookEventpage.bookedevent.booked) || (bookEventpage.bookedevent === undefined)) || !isEventEnabled(myevent)" style="color: black;" v-model="bookEventForm.booked" :label="$t('cal.bookingtextdefault')" color="green">
+                                        <q-checkbox
+                                                :disable="((bookEventpage.bookedevent && bookEventpage.bookedevent.booked) || (bookEventpage.bookedevent === undefined)) || !isEventEnabled(myevent)"
+                                                style="color: black;" v-model="bookEventForm.booked"
+                                                :label="$t('cal.bookingtextdefault')" color="green">
                                         </q-checkbox>
 
-                                        <div v-if="bookEventForm.booked" class="q-gutter-md centermydiv" style="max-width: 150px; margin-top:10px;">
+                                        <div v-if="bookEventForm.booked" class="q-gutter-md centermydiv"
+                                             style="max-width: 150px; margin-top:10px;">
                                             <q-select
                                                     rounded outlined v-model="bookEventForm.numpeople"
                                                     :options="tools.SelectListNumPeople"
@@ -264,7 +271,8 @@
                                             </q-select>
                                         </div>
 
-                                        <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'" autogrow>
+                                        <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'"
+                                                 autogrow>
                                         </q-input>
                                     </q-card-section>
                                 </q-card>
@@ -281,8 +289,10 @@
                     </q-card-section>
                     <q-card-actions align="right">
                         <q-btn v-if="bookEventpage.state === EState.Modifying" flat :label="$t('cal.cancelbooking')"
-                               color="negative" @click="tools.CancelBookingEvent(mythis, myevent, bookEventForm._id, true)"></q-btn>
+                               color="negative"
-                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendmsg')" color="primary" @click="sendMsg(myevent)"></q-btn>
+                               @click="tools.CancelBookingEvent(mythis, myevent, bookEventForm._id, true)"></q-btn>
+                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendmsg')" color="primary"
+                               @click="sendMsg(myevent)"></q-btn>
                         <q-btn v-else flat :label="getTitleBtnBooking" color="primary" @click="saveBookEvent(myevent)"
                                :disable="!(bookEventpage.state === EState.Creating || hasModifiedBooking)"></q-btn>
 
@@ -385,38 +395,36 @@
                     <template #day-header="{ date }">
                         <div class="row justify-center">
                             <template v-for="(event, index) in eventsMap[date]">
+                                <!--<q-badge-->
+                                <!--v-if="event.allday"-->
+                                <!--:key="index"-->
+                                <!--style="width: 100%; cursor: pointer;"-->
+                                <!--class="ellipsis"-->
+                                <!--:class="badgeClasses(event, 'header')"-->
+                                <!--:style="badgeStyles(event, 'header')"-->
+                                <!--@click.stop.prevent="showEvent(event)"-->
+                                <!--:draggable="true"-->
+                                <!--@dragstart.native="(e) => onDragStart(e, event)"-->
+                                <!--@dragend.native="(e) => onDragEnd(e, event)"-->
+                                <!--@dragenter.native="(e) => onDragEnter(e, event)"-->
+                                <!--@touchmove.native="(e) => {}"-->
+                                <!--&gt;-->
+                                <!--<q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>-->
+                                <!--<span class="ellipsis">{{ event.title }}</span>-->
+                                <!--</q-badge>-->
                                 <q-badge
-                                        v-if="!event.withtime"
-                                        :key="index"
-                                        style="width: 100%; cursor: pointer;"
-                                        class="ellipsis"
-                                        :class="badgeClasses(event, 'header')"
-                                        :style="badgeStyles(event, 'header')"
-                                        @click.stop.prevent="showEvent(event)"
-                                        :draggable="true"
-                                        @dragstart.native="(e) => onDragStart(e, event)"
-                                        @dragend.native="(e) => onDragEnd(e, event)"
-                                        @dragenter.native="(e) => onDragEnter(e, event)"
-                                        @touchmove.native="(e) => {}"
-                                >
-                                    <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
-                                    <span class="ellipsis">{{ event.title }}</span>
-                                </q-badge>
-                                <q-badge
-                                        v-else
                                         :key="index"
                                         class="q-ma-xs"
                                         :class="badgeClasses(event, 'header')"
                                         :style="badgeStyles(event, 'header')"
                                         style="width: 10px; max-width: 10px; height: 10px; max-height: 10px"
-                                />
+                                ></q-badge>
                             </template>
                         </div>
                     </template>
                     <template #day-body="{ date, timeStartPos, timeDurationHeight }">
                         <template v-for="(event, index) in getEvents(date)">
                             <q-badge
-                                    v-if="event.withtime"
                                     :key="index"
                                     class="my-event justify-center ellipsis"
                                     :class="badgeClasses(event, 'body')"
@@ -438,7 +446,7 @@
 
         </q-page>
 
-        <div>
+        <div class="q-mt-md">
             <p class="text-subtitle1 text-red text-center">LISTA PROSSIMI EVENTI:</p>
 
             <q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
@@ -457,18 +465,15 @@
                         <div class="listaev__date listaev__align_center_mobile">
 
                             <div v-if="event.infoextra">
-                                    <span class="listaev__date">{{func_tools.getDateStr(event.date)}} - <span
+                                    <span class="listaev__date">{{func_tools.getDateStr(event.dateTimeStart)}} - <span
                                             class="cal__hours-content">{{ event.infoextra }}</span> </span>
                             </div>
                             <div v-else>
-                                <div v-if="event.date" class="listaev__date">
+                                <div v-if="event.dateTimeStart" class="listaev__date">
-                                    {{func_tools.getDateStr(event.date)}}
+                                    {{tools.getstrDateTime(event.dateTimeStart)}} -
-                                    <span v-if="event.withtime" class="cal__hours-content"> - {{ tools.getstrTime(event.date) }} <span
+                                    {{tools.getstrDateTime(event.dateTimeEnd)}}
-                                            v-if="event.dur">- {{ getEndTime(event) }}</span></span>
-                                    <span v-if="event.days > 1"><br/>{{func_tools.getDateStr(tools.addDays(event.date, event.days - 1))}}</span>
                                 </div>
                             </div>
-
                         </div>
 
                         <div class="">
@@ -518,17 +523,17 @@
                                     <span class="cal__teacher-content">{{getTeacherName(event.teacher2)}}</span>
                                 </q-chip>
 
-                                <span v-if="event.where" class="">
+                                <span v-if="event.wherecode" class="">
                                         <span v-if="tools.isMobile()"><br/></span>
                                         <span class="cal__where-title">{{$t('cal.where')}}: </span>
 
                                         <q-chip>
-                                            <q-avatar v-if="event.whereicon">
+                                            <q-avatar v-if="getWhereIcon(event.wherecode)">
-                                                <img :src="`../../statics/images/avatar/` + event.whereicon">
+                                                <img :src="`../../statics/images/avatar/` + getWhereIcon(event.wherecode)">
                                             </q-avatar>
                                             <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
                                             </q-avatar>
-                                            <span class="cal__teacher-content">{{event.where}}</span>
+                                            <span class="cal__teacher-content">{{getWhereName(event.wherecode)}}</span>
                                         </q-chip>
                                     </span>
                             </div>

src/components/CGridTableRec/CGridTableRec.ts

@@ -88,10 +88,9 @@ export default class CGridTableRec extends Vue {
   }
 
   public SaveValue(newVal, valinitial) {
-    console.log('SaveValue', newVal, 'selected', this.selected)
+    // console.log('SaveValue', newVal, 'selected', this.selected)
 
     const mydata = {
-      // colkey: this.colkey,
       id: this.idsel,
       table: this.mytable,
       fieldsvalue: {}
@@ -99,13 +98,8 @@ export default class CGridTableRec extends Vue {
 
     mydata.fieldsvalue[this.colsel] = newVal
 
-    console.table(mydata)
-
     this.valPrec = valinitial
 
-    // console.log('this.idsel', this.idsel, 'this.colsel', this.colsel)
-    // console.table(mydata)
-
     this.saveFieldValue(mydata)
   }
 
@@ -321,7 +315,7 @@ export default class CGridTableRec extends Vue {
 
   public clickFunz(item, col: IColGridTable) {
     if (col.action) {
-      tools.ActionRecTable(this, col.action, this.mytable, item._id, item)
+      tools.ActionRecTable(this, col.action, this.mytable, item._id, item, col.askaction)
     }
   }
 
@@ -331,7 +325,8 @@ export default class CGridTableRec extends Vue {
         this.serverData.splice(this.serverData.indexOf(item), 1)
     } else if (action === lists.MenuAction.DUPLICATE_RECTABLE) {
       // Add record duplicated
-      this.serverData.push(data)
+      // this.serverData.push(data)
+      this.refresh()
     }
   }
 
@@ -354,8 +349,12 @@ export default class CGridTableRec extends Vue {
       } else {
         return tools.getstrDateTime(val)
       }
+    } else if (col.fieldtype === 'boolean') {
+      return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else {
-      if (val === undefined) {
+      if (val === undefined)
+        return '[]'
+      else if (val === '') {
         return '[]'
       } else {
         let mystr = tools.firstchars(val, tools.MAX_CHARACTERS)

src/components/CGridTableRec/CGridTableRec.vue

@@ -86,10 +86,10 @@
                 <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colVisib.includes(col.field)">
                     <div v-if="col.fieldtype === 'date'">
                         <div style="max-width: 250px; min-width: 200px">
-                            <q-input dense v-model="props.row[col.name]">
+                            <div class="flex flex-container">
-                                <template v-slot:prepend>
                                 <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                    <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
+                                                  v-model="props.row[col.name]" :disable="col.disable"
                                                   :title="col.title" buttons
                                                   @save="SaveValue" @show="selItem(props.row, col.field)">
                                         <q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm"/>
@@ -99,11 +99,13 @@
                                     <!--<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />-->
                                     <!--</q-popup-proxy>-->
                                 </q-icon>
-                                </template>
+                                <div>
+                                    {{ visuValByType(col, props.row[col.name]) }}
+                                </div>
 
-                                <template v-slot:append>
                                 <q-icon name="access_time" class="cursor-pointer">
-                                        <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                    <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
+                                                  v-model="props.row[col.name]" :disable="col.disable"
                                                   :title="col.title" buttons
                                                   @save="SaveValue" @show="selItem(props.row, col.field)">
                                         <q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h/>
@@ -114,12 +116,22 @@
                                     <!--<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />-->
                                     <!--</q-popup-proxy>-->
                                 </q-icon>
-                                </template>
-                            </q-input>
                             </div>
                         </div>
-                    <div v-if="col.fieldtype === 'boolean'">
+                    </div>
-                        <q-checkbox v-model="props.row[col.name])" label="" />
+                    <div v-else-if="col.fieldtype === 'boolean'">
+                        <div :class="getclassCol(col)">
+                            {{ visuValByType(col, props.row[col.name]) }}
+                            <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                          :title="col.title" buttons
+                                          @save="SaveValue" @show="selItem(props.row, col.field)">
+                                <q-checkbox v-model="props.row[col.name]" label="">
+
+                                </q-checkbox>
+                                {{ visuValByType(col, props.row[col.name]) }}
+
+                            </q-popup-edit>
+                        </div>
                     </div>
                     <div v-else>
                         <div :class="getclassCol(col)">

src/model/Calendar.ts

@@ -5,27 +5,28 @@ export interface IEvents {
   short_tit?: string
   title?: string
   details?: string
-  withtime?: boolean
+  dateTimeStart?: Date
-  dur?: number
+  dateTimeEnd?: Date
-  dur2?: number
-  date?: string
   side?: string
   bgcolor?: string
-  days?: number
   icon?: string
   img?: string
-  where?: string
+  img_small?: string
-  contribtype?: number
+  wherecode?: string
-  teacher?: string  // teacherid
+  contribtype?: string
-  teacher2?: string // teacherid2
+  price?: number
+  infoafterprice?: string
+  teacher?: string
+  teacher2?: string
   infoextra?: string
   linkpage?: string
   linkpdf?: string
   nobookable?: boolean
   news?: boolean
-  dupId?: any
   canceled?: boolean
   deleted?: boolean
+  dupId?: any
+  modified?: boolean
 }
 
 export interface IBookedEvent {
@@ -55,6 +56,12 @@ export interface IOperators {
   offers?: string
 }
 
+export interface IWheres {
+  code: string
+  placename: string
+  whereicon: string
+}
+
 export enum EState {
   None, Creating, Modifying
 }
@@ -70,6 +77,7 @@ export interface ICalendarState {
   eventlist: IEvents[]
   bookedevent: IBookedEvent[]
   operators: IOperators[]
+  wheres: IWheres[]
   // ---------------
   titlebarHeight: number
   locale: string,

src/model/GlobalStore.ts

@@ -226,6 +226,7 @@ export interface IColGridTable {
   visible?: boolean
   icon?: string
   action?: any
+  askaction?: string
   foredit?: boolean
   fieldtype?: string
   visuonlyEditVal?: boolean

src/statics/i18n.js

@@ -30,6 +30,7 @@ const msgglobal = {
       delete: 'Elimina',
       cancel: 'Annulla',
       update: 'Aggiorna',
+      add: 'Aggiungi',
       today: 'Oggi',
       book: 'Prenota',
       sendmsg: 'Invia solo un Msg',
@@ -229,16 +230,16 @@ const msgglobal = {
       short_tit: 'Titolo Breve',
       title: 'Titolo',
       details: 'Dettagli',
-      withtime: 'Con Tempo',
-      dur: 'durata (min)',
-      dur2: 'durata2 (min)',
       date: 'Data',
       bgcolor: 'Colore Sfondo',
       days: 'Giorni',
       icon: 'Icona',
       img: 'Nomefile Immagine',
+      img_small: 'Img Piccola',
       where: 'Dove',
       contribtype: 'Tipo Contributo',
+      price: 'Quota',
+      infoafterprice: 'Note dopo la Quota',
       teacher: 'Insegnante',  // teacherid
       teacher2: 'Insegnante2', // teacherid2
       infoextra: 'InfoExtra',
@@ -249,7 +250,8 @@ const msgglobal = {
       dupId: 'Id Duplicato',
       canceled: 'Cancellato',
       deleted: 'Eliminato',
-      duplicate: 'Duplica'
+      duplicate: 'Duplica',
+      modified: 'Modificato'
     },
     newsletter: {
       title: 'Desideri ricevere la nostra Newsletter?',
@@ -297,6 +299,7 @@ const msgglobal = {
       delete: 'Borrar',
       cancel: 'Cancelar',
       update: 'Actualiza',
+      add: 'Aggrega',
       today: 'Hoy',
       book: 'Reserva',
       sendmsg: 'Envia solo Mensaje',
@@ -490,16 +493,16 @@ const msgglobal = {
       short_tit: 'Título Corto',
       title: 'Título',
       details: 'Detalles',
-      withtime: 'Con Tiempo',
-      dur: 'duración (min)',
-      dur2: 'duración2 (min)',
       date: 'Fecha',
       bgcolor: 'Color de fondo',
       days: 'Días',
       icon: 'Icono',
       img: 'Nombre Imagen',
+      img_small: 'Imagen Pequeña',
       where: 'Dónde',
       contribtype: 'Tipo de Contribución',
+      price: 'Precio',
+      infoafterprice: 'notas después del precio',
       teacher: 'Profesor',  // teacherid
       teacher2: 'Profesor2', // teacherid2
       infoextra: 'InfoExtra',
@@ -511,6 +514,7 @@ const msgglobal = {
       canceled: 'Cancelado',
       deleted: 'Eliminado',
       duplicate: 'Duplica',
+      modified: 'Modificado'
     },
     newsletter: {
       title: '¿Desea recibir nuestro boletín informativo?',
@@ -557,6 +561,7 @@ const msgglobal = {
       no: 'Non',
       delete: 'Supprimer',
       update: 'mises à jour',
+      add: 'Ajouter',
       cancel: 'annuler',
       today: 'Aujourd\'hui',
       book: 'Réserve',
@@ -750,16 +755,16 @@ const msgglobal = {
       short_tit: 'Titre abrégé\'',
       title: 'Titre',
       details: 'Détails',
-      withtime: 'avec le temps',
-      dur: 'durée (min)',
-      dur2: 'durée2 (min)',
       date: 'Date',
       bgcolor: 'Couleur de fond',
       days: 'Journées',
       icon: 'Icône',
       img: 'Image du nom de fichier',
+      img_small: 'Image petite',
       where: 'Où',
       contribtype: 'Type de contribution',
+      price: 'Prix',
+      infoafterprice: 'Notes après le prix',
       teacher: 'Enseignant',  // teacherid
       teacher2: 'Enseignant2', // teacherid2
       infoextra: 'Extra Info',
@@ -770,7 +775,8 @@ const msgglobal = {
       dupId: 'Id Double',
       canceled: 'Annulé',
       deleted: 'Supprimé',
-      duplicate: 'Duplique'
+      duplicate: 'Duplique',
+      modified: 'modifié'
     },
     newsletter: {
       title: 'Souhaitez-vous recevoir notre newsletter?',
@@ -817,6 +823,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Delete',
       update: 'Update',
+      add: 'Add',
       cancel: 'Cancel',
       today: 'Today',
       book: 'Book',
@@ -1009,16 +1016,16 @@ const msgglobal = {
       short_tit: 'Short Title',
       title: 'Title',
       details: 'Details',
-      withtime: 'With Time',
-      dur: 'Duration (min)',
-      dur2: 'Duration2 (min)',
       date: 'Date',
       bgcolor: 'Background color',
       days: 'Days',
       icon: 'Icon',
       img: 'Nomefile Img',
+      img_small: 'Img Small',
       where: 'Qhere',
       contribtype: 'Contribute Type',
+      price: 'Price',
+      infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2
       infoextra: 'Extra Info',
@@ -1029,7 +1036,8 @@ const msgglobal = {
       dupId: 'Id Duplicate',
       canceled: 'Canceled',
       deleted: 'Deleted',
-      duplicate: 'Duplicate'
+      duplicate: 'Duplicate',
+      modified: 'Modified'
     },
     newsletter: {
       title: 'Would you like to receive our Newsletter?',
@@ -1076,6 +1084,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Delete',
       update: 'Update',
+      add: 'Add',
       cancel: 'Cancel',
       today: 'Today',
       book: 'Book',
@@ -1270,16 +1279,16 @@ const msgglobal = {
       short_tit: 'Short Title',
       title: 'Title',
       details: 'Details',
-      withtime: 'With Time',
-      dur: 'Duration (min)',
-      dur2: 'Duration2 (min)',
       date: 'Date',
       bgcolor: 'Background color',
       days: 'Days',
       icon: 'Icon',
       img: 'Nomefile Img',
+      img_small: 'Img Small',
       where: 'Qhere',
       contribtype: 'Contribute Type',
+      price: 'Price',
+      infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2
       infoextra: 'Extra Info',
@@ -1290,7 +1299,8 @@ const msgglobal = {
       dupId: 'Id Duplicate',
       canceled: 'Canceled',
       deleted: 'Deleted',
-      duplicate: 'Duplicate'
+      duplicate: 'Duplicate',
+      modified: 'Modified'
     },
     newsletter: {
       title: 'Would you like to receive our Newsletter?',

src/store/Modules/GlobalStore.ts

@@ -270,10 +270,12 @@ namespace Mutations {
   }
 
   function getListByTable(table): any[] {
-    if (table === 'events')
+    if (table === 'myevents')
       return CalendarStore.state.eventlist
     else if (table === 'operators')
       return CalendarStore.state.operators
+    else if (table === 'wheres')
+      return CalendarStore.state.wheres
     else if (table === 'bookings')
       return CalendarStore.state.bookedevent
     else if (table === 'users')

src/store/Modules/Store/calendar/CalendarStore.ts

@@ -18,6 +18,7 @@ const state: ICalendarState = {
   eventlist: [],
   bookedevent: [],
   operators: [],
+  wheres: [],
   // ---------------
   titlebarHeight: 0,
   locale: 'it-IT',
@@ -63,6 +64,24 @@ namespace Getters {
     return mystate.bookedevent.filter((bookedevent) => (bookedevent.id_bookedevent === idevent) && (bookedevent.booked) && (showall || (!showall && bookedevent.userId === UserStore.state.userId) ))
   }, 'getEventsBookedByIdEvent')
 
+  const getTeacherName = b.read((mystate: ICalendarState) => (teacherusername) => {
+    const op = mystate.operators.find((myop) => myop.username === teacherusername)
+    return (op) ? `${op.name} ${op.surname}` : ''
+
+  }, 'getTeacherName')
+
+  const getTeacher = b.read((mystate: ICalendarState) => (teacherusername) => {
+    const op = mystate.operators.find((myop) => myop.username === teacherusername)
+    return (op)
+
+  }, 'getTeacher')
+
+  const getWhereRec = b.read((mystate: ICalendarState) => (wherecode) => {
+    const whererec = mystate.wheres.find((mywhere) => mywhere.code === wherecode)
+    return (whererec)
+
+  }, 'getWhereRec')
+
   export const getters = {
     get findEventBooked() {
       return findEventBooked()
@@ -72,6 +91,15 @@ namespace Getters {
     },
     get getEventsBookedByIdEvent() {
       return getEventsBookedByIdEvent()
+    },
+    get getTeacher() {
+      return getTeacher()
+    },
+    get getWhereRec() {
+      return getWhereRec()
+    },
+    get getTeacherName() {
+      return getTeacherName()
     }
   }
 
@@ -92,9 +120,7 @@ namespace Actions {
   async function loadAfterLogin(context) {
     // console.log('CalendarStore: loadAfterLogin')
     // Load local data
-    state.editable = db_data.userdata.calendar_editable
+    state.editable = UserStore.state.isAdmin || UserStore.state.isManager
-    // state.eventlist = db_data.events
-    // state.bookedevent = db_data.userdata.bookedevent
 
     if (UserStore.getters.isUserInvalid) {
       state.bookedevent = []
@@ -113,6 +139,7 @@ namespace Actions {
         state.bookedevent = (res.data.bookedevent) ? res.data.bookedevent : []
         state.eventlist = (res.data.eventlist) ? res.data.eventlist : []
         state.operators = (res.data.operators) ? res.data.operators : []
+        state.wheres = (res.data.wheres) ? res.data.wheres : []
 
       })
       .catch((error) => {

src/store/Modules/lists.ts

@@ -19,7 +19,7 @@ export const lists = {
     DUPLICATE_RECTABLE: 310,
 
     CAN_EDIT_TABLE: 400,
-    SHOW_PREV_REC: 401,
+    SHOW_PREV_REC: 401
   },
 
   selectTheme: [

src/store/Modules/tools.ts

@@ -1664,8 +1664,10 @@ export const tools = {
   ,
   getstrYYMMDDDate(mytimestamp) {
     return date.formatDate(mytimestamp, 'YYYY-MM-DD')
-  }
+  },
-  ,
+  getstrYYMMDDDateTime(mytimestamp) {
+    return date.formatDate(mytimestamp, 'YYYY-MM-DD HH:mm')
+  },
 
 // mystrdate "26.04.2013"
   convertstrtoDate(mystrdate
@@ -2144,7 +2146,7 @@ export const tools = {
   },
   gettextevent(myevent: IEvents) {
     // return '"' + myevent.title + '" (' + func_tools.getDateStr(myevent.date) + ') - ' + myevent.time
-    return '"' + myevent.title + '" (' + tools.getstrDateTime(myevent.date)
+    return '"' + myevent.title + '" (' + tools.getstrDateTime(myevent.dateTimeStart)
   },
 
   setLangAtt(mylang) {
@@ -2299,9 +2301,9 @@ export const tools = {
       param2: notify
     })
   },
-  ActionRecTable(mythis, action, table, id, item?) {
+  ActionRecTable(mythis, action, table, id, item, askaction) {
-    console.log('CancelRecTable', id)
+    console.log('ActionRecTable', id)
-    return tools.askConfirm(mythis.$q, translate('db.deleterecord'), translate('db.deletetherecord'), translate('dialog.yes'), translate('dialog.no'), mythis, table, action, 0, {
+    return tools.askConfirm(mythis.$q, 'Action', translate(askaction) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, table, action, 0, {
       param1: id,
       param2: item
     })

src/store/Modules/toolsext.ts

@@ -1,4 +1,5 @@
 import { UserStore } from '@store'
+import { date } from 'quasar'
 
 export const toolsext = {
   getLocale(vero?: boolean) {
@@ -34,12 +35,23 @@ export const func_tools = {
       // timeZone: 'UTC'
     })
     if (DateFormatter) {
-      const date = new Date(mydate)
+      const date1 = new Date(mydate)
-      return DateFormatter.format(date)
+      return DateFormatter.format(date1)
     }
     return mydate
   },
 
+  hasManyDays(mydatestart, mydateend) {
+    if (mydateend)
+      return this.getDateStr(mydatestart) !== this.getDateStr(mydateend)
+    else
+      return false
+  },
+
+  getMinutesDuration(mydatestart, mydateend) {
+    return date.getDateDiff(mydateend, mydatestart, 'minutes')
+  },
+
   getDateTimeShortStr(mydate) {
     const DateFormatter = new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
       hour: 'numeric',