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

- Event: enabled drag and drop (date)
- Q-Select components in every table field external: Where, Operators, etc...
- CMyEditor: Add HTML Editor to the details field !
- Added button Color for change font color to the text.
- Complete insert Events Site

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -34,7 +34,7 @@ $graytext: #555;
   letter-spacing: 0.03333em;
 
   &__title {
-    color: red;
+    color: white;
     font-weight: 700;
     font-size: 1rem;
     padding-bottom: 10px;
@@ -55,7 +55,7 @@ $graytext: #555;
   }
 
   &__where {
-    margin-top: 10px;
+    margin-top: 5px;
     color: blue;
 
     &-title {
@@ -67,7 +67,7 @@ $graytext: #555;
   }
 
   &__when {
-    margin-top: 10px;
+    margin-top: 5px;
     color: blue;
 
     &-title {
@@ -79,7 +79,7 @@ $graytext: #555;
   }
 
   &__teacher {
-    margin-top: 10px;
+    margin-top: 5px;
     &-title {
       color: $graytext;
     }
@@ -88,6 +88,16 @@ $graytext: #555;
     }
   }
 
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
   &__img {
     width: 100px;
     height: 100px;
@@ -141,6 +151,18 @@ $graytext: #555;
     @media (max-width: 718px) {
       text-align: center;
       display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &__align_chips {
+    text-align: left;
+    @media (max-width: 718px) {
+      text-align: center;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
     }
   }
 
@@ -201,10 +223,21 @@ $graytext: #555;
   position: absolute;
   left: 40px;
   @media (max-width: 400px) {
+    left: initial;
     position: initial;
   }
 }
 
+.chipnews {
+
+  position: absolute;
+  right: 0;
+  @media (max-width: 400px) {
+    position: initial;
+    right: initial;
+  }
+}
+
 .windowcol {
   background-color: #ffffff;
           // background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
@@ -213,3 +246,18 @@ $graytext: #555;
 .mysel{
   color: white;
 }
+
+.calendar_comp{
+  max-width: 170px;
+  @media (max-width: 400px) {
+    max-width: 400px;
+  }
+}
+
+.myflex{
+  display: flex;
+  flex: 1;
+  @media (max-width: 400px) {
+    flex-flow: column;
+  }
+}

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -13,6 +13,8 @@ import { colors, Screen, Platform, date } from 'quasar'
 
 import { CTitle } from '../../components/CTitle/index'
 import { CImgText } from '../../components/CImgText/index'
+import { CMySelect } from '../../components/CMySelect/index'
+import { CMyEditor } from '../../components/CMyEditor/index'
 import { stop, prevent, stopAndPrevent } from 'quasar/src/utils/event'
 
 import QDateScroller from '@quasar/quasar-app-extension-qscroller/src/component/QDateScroller'
@@ -30,9 +32,90 @@ import { GlobalStore } from '../../store/Modules'
 
 @Component({
   name: 'CEventsCalendar',
-  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller }
+  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor }
 })
 export default class CEventsCalendar extends Vue {
+  public $q
+  public $t: any
+  public calendarView = 'month'
+  public selectedDate = '2019-04-01'
+  public formDefault: IEvents = {
+    title: '',
+    details: '',
+    dateTimeStart: tools.getstrYYMMDDDateTime(tools.getDateNow()),
+    dateTimeEnd: tools.getstrYYMMDDDateTime(tools.getDateNow()),
+    icon: '',
+    bgcolor: '#839ff2'
+  }
+
+  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: IEvents = { ...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 eventdata =
   //   [
@@ -189,7 +272,7 @@ export default class CEventsCalendar extends Vue {
   get eventsMap() {
     // console.log('eventsMap')
     const map = {}
-    CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.dateTimeStart.toDateString()] = map[myevent.dateTimeStart.toDateString()] || []).push(myevent))
+    CalendarStore.state.eventlist.forEach((myevent) => (map[tools.getstrDateTime(myevent.dateTimeStart)] = map[tools.getstrDateTime(myevent.dateTimeStart)] || []).push(myevent))
     return map
   }
 
@@ -271,85 +354,7 @@ export default class CEventsCalendar extends Vue {
   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
@@ -367,6 +372,7 @@ export default class CEventsCalendar extends Vue {
     this.$root.$on('calendar:today', this.calendarToday)
     // CalendarStore.state.eventlist = events
     this.updateFormatters()
+
   }
 
   public beforeMount() {
@@ -411,6 +417,9 @@ export default class CEventsCalendar extends Vue {
     this.resetForm()
     this.contextDay = { ...day }
 
+    this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(day.date + ' 21:00:00')
+    this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(day.date + ' 22:00:00')
+
     this.addEvent = true // show dialog
   }
 
@@ -423,7 +432,6 @@ export default class CEventsCalendar extends Vue {
       console.log('addBookEventMenu')
       this.resetForm()
       this.myevent = eventparam
-      // this.bookEventForm.msgbooking = translate('cal.bookingtextdefault') + ' ' + tools.gettextevent(this.myevent)
       this.bookEventForm.msgbooking = ''
       this.bookEventForm.numpeople = 1
       this.bookEventpage.state = EState.Creating
@@ -440,6 +448,7 @@ export default class CEventsCalendar extends Vue {
   public editEvent(eventparam) {
     console.log('editEvent - INIZIO')
     this.resetForm()
+
     this.contextDay = { ...eventparam }
 
     this.eventForm = { ...eventparam }
@@ -459,6 +468,7 @@ export default class CEventsCalendar extends Vue {
 
   public findEventIndex(eventparam) {
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
+      if (eventparam) {
         if (eventparam.title === CalendarStore.state.eventlist[i].title &&
           eventparam.details === CalendarStore.state.eventlist[i].details &&
           eventparam.dateTimeStart === CalendarStore.state.eventlist[i].dateTimeStart &&
@@ -467,6 +477,7 @@ export default class CEventsCalendar extends Vue {
         }
       }
     }
+  }
 
   public formatDate(mydate: any) {
     let d = void 0
@@ -498,6 +509,33 @@ export default class CEventsCalendar extends Vue {
     return diff
   }
 
+  public UpdateDbByFields(myrec, undo?) {
+    const self = this
+
+    const mydatatosave = {
+      id: myrec._id,
+      table: 'myevents',
+      fieldsvalue: myrec
+    }
+
+    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...
+        if (undo) {
+          const index = self.findEventIndex(self.contextDay)
+          if (index >= 0) {
+            // @ts-ignore
+            CalendarStore.state.eventlist.splice(index, 1, { ...self.contextDay })
+          }
+        }
+      }
+    })
+
+  }
+
   public saveEvent() {
     const self = this
 
@@ -508,7 +546,7 @@ export default class CEventsCalendar extends Vue {
       self.addEvent = false
       const form = { ...self.eventForm }
       let update = false
-      if (self.contextDay.bgcolor) {
+      if (self.contextDay._id) {
         // an update
         update = true
       } else {
@@ -516,18 +554,6 @@ export default class CEventsCalendar extends Vue {
       }
       const data = { ...form }
 
-      if (update === true) {
-        const index = self.findEventIndex(self.contextDay)
-        if (index >= 0) {
-          // @ts-ignore
-          CalendarStore.state.eventlist.splice(index, 1, { ...data })
-        }
-      } else {
-        // add to events array
-        // @ts-ignore
-        CalendarStore.state.eventlist.push(data)
-      }
-
       // ++Save into the Database
       const mydatatosave = {
         id: data._id,
@@ -535,9 +561,31 @@ export default class CEventsCalendar extends Vue {
         fieldsvalue: data
       }
 
-      GlobalStore.actions.saveFieldValue(mydatatosave).then((esito) => {
+      if (update === true) {
-        if (esito) {
+        this.UpdateDbByFields(data, true)
+      } else {
+        const mydataadd = {
+          table: 'myevents',
+          data
+        }
+
+        GlobalStore.actions.saveTable(mydataadd).then((record) => {
+          if (record) {
             tools.showPositiveNotif(this.$q, this.$t('db.recupdated'))
+
+            if (update === true) {
+              const index = self.findEventIndex(self.contextDay)
+              if (index >= 0) {
+                // @ts-ignore
+                CalendarStore.state.eventlist.splice(index, 1, { ...data })
+              }
+            } else {
+              data._id = record._id
+              // add to events array
+              // @ts-ignore
+              CalendarStore.state.eventlist.push(data)
+            }
+
           } else {
             tools.showNegativeNotif(this.$q, this.$t('db.recfailed'))
             // Undo...
@@ -548,6 +596,7 @@ export default class CEventsCalendar extends Vue {
             }
           }
         })
+      }
 
       self.contextDay = null
     }
@@ -592,7 +641,7 @@ export default class CEventsCalendar extends Vue {
         userId: UserStore.state.userId,
         id_bookedevent: myevent._id,
         numpeople: self.bookEventForm.numpeople,
-        infoevent: tools.gettextevent(myevent),
+        infoevent: tools.gettextevent(self, myevent),
         msgbooking: self.bookEventForm.msgbooking,
         booked: self.bookEventForm.booked,
         datebooked: tools.getDateNow(),
@@ -686,14 +735,29 @@ export default class CEventsCalendar extends Vue {
   public onDrop(ev, day, type) {
     ev.preventDefault()
     ev.stopPropagation()
+    console.log('day.dateTimeStart', day.dateTimeStart, day.date, 'day.time', day.time)
     if (type === 'day') {
-      this.draggedEvent.dateTimeStart = day.dateTimeStart
+      this.draggedEvent.dateTimeStart = day.date + ' ' + tools.getstrTime(this.draggedEvent.dateTimeStart)
+      this.draggedEvent.dateTimeEnd = day.date + ' ' + tools.getstrTime(this.draggedEvent.dateTimeEnd)
       this.draggedEvent.side = void 0
     } else if (type === 'interval') {
-      this.draggedEvent.dateTimeStart = day.dateTimeStart
+      const mins = date.getDateDiff(this.draggedEvent.dateTimeEnd, this.draggedEvent.dateTimeStart, 'minutes')
+      this.draggedEvent.dateTimeStart = day.date + ' ' + day.time
+      const mystart = new Date(this.draggedEvent.dateTimeStart)
+      this.draggedEvent.dateTimeEnd = tools.addMinutes(mystart, mins)
+      // this.draggedEvent.dateTimeEnd = day.dateTimeEnd
       // this.draggedEvent.time = day.time
       this.draggedEvent.side = void 0
     }
+    // console.log('Start', this.draggedEvent.dateTimeStart, 'End', this.draggedEvent.dateTimeEnd)
+
+    // Save Date
+    this.UpdateDbByFields({
+      _id: this.draggedEvent._id,
+      dateTimeStart: this.draggedEvent.dateTimeStart,
+      dateTimeEnd: this.draggedEvent.dateTimeEnd
+    }, true)
+
   }
 
   public resetDrag() {
@@ -712,12 +776,58 @@ export default class CEventsCalendar extends Vue {
     return CalendarStore.getters.findEventBooked(eventparam, true)
   }
 
+  public getImgEvent(event: IEvents) {
+    if (!!event.img)
+      return '../../statics/' + event.img
+    else
+      return '../../statics/images/noimg.png'
+  }
+
+  get getContribTypeArr() {
+    return CalendarStore.state.contribtype
+  }
+
+  get getTeachersArr() {
+    return CalendarStore.state.operators
+  }
+
+  get getWhereArr() {
+    return CalendarStore.state.wheres
+  }
+
+  public isShowPrice(event: IEvents) {
+    const rec = CalendarStore.getters.getContribtypeRec(event.contribtype)
+    return (rec) ? rec.showprice : true
+  }
+
+  public getContribtypeById(id) {
+    return CalendarStore.getters.getContribtypeById(id)
+  }
+
+  public createContribType(value) {
+    console.log('createContribType', value)
+    tools.createNewRecord(this, 'contribtype', { label: value }).then((myrec) => {
+      console.log('myrec')
+      CalendarStore.state.contribtype.push(myrec)
+    })
+  }
+
   public getEventDate(eventparam) {
     const parts = eventparam.dateTimeStart.split('-')
     const mydate = new Date(parts[0], parts[1] - 1, parts[2])
     return this.dateFormatter.format(mydate)
   }
 
+  public getPrice(event: IEvents) {
+    let myprice = (event.price > 0) ? event.price + ' €' : ''
+    myprice = (event.price === -1) ? this.$t('event.askinfo') : myprice
+
+    if (event.infoafterprice)
+      myprice += ' ' + event.infoafterprice
+
+    return myprice
+  }
+
   public getTeacherName(teacherusername) {
     return CalendarStore.getters.getTeacherName(teacherusername)
   }
@@ -726,6 +836,7 @@ export default class CEventsCalendar extends Vue {
     const whererec = CalendarStore.getters.getWhereRec(where)
     return (whererec) ? whererec.whereicon : ''
   }
+
   public getWhereName(where) {
     const whererec = CalendarStore.getters.getWhereRec(where)
     return (whererec) ? whererec.placename : ''
@@ -835,7 +946,7 @@ export default class CEventsCalendar extends Vue {
           // CalendarStore.state.eventlist[i].side = void 0
           eventsloc.push(CalendarStore.state.eventlist[i])
         }
-      } else if (func_tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
+      } else if (tools.hasManyDays(CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
         // check for overlapping dates
         if (date.isBetweenDates(dt, CalendarStore.state.eventlist[i].dateTimeStart, CalendarStore.state.eventlist[i].dateTimeEnd)) {
           eventsloc.push(CalendarStore.state.eventlist[i])

src/components/CEventsCalendar/CEventsCalendar.vue

@@ -4,8 +4,9 @@
             <!-- display an myevent -->
             <q-dialog v-model="displayEvent">
                 <q-card v-if="myevent">
-                    <q-toolbar :class="tools.displayClasses(myevent)"
+                    <q-toolbar class="bg-primary text-white" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
-                               :style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">
+                        <!--<q-toolbar :class="tools.displayClasses(myevent)"-->
+                        <!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
                         <q-toolbar-title>
                             {{ $t('cal.event') }}
                         </q-toolbar-title>
@@ -16,14 +17,20 @@
                         <q-btn flat round color="white" icon="cancel" v-close-popup></q-btn>
                     </q-toolbar>
                     <q-card-section class="inset-shadow">
-                        <q-img :src="`../../statics/`+myevent.img"
+                        <q-img :src="getImgEvent(myevent)"
                                class="absolute-top"
                                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>
+
+                            <q-chip
+                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                                    text-color="white"
+                                    class="shadow-5 q-mb-md" dense>
+                                {{myevent.title}}
+                            </q-chip>
                             <div class="cal__details" v-html="myevent.details"></div>
                             <div v-if="myevent.teacher" class="cal__teacher">
                                     <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
@@ -47,7 +54,7 @@
                                 </span>
                             </div>
                             <div v-if="myevent.wherecode" class="cal__where">
-                                <span v-if="tools.isMobile()"><br/></span>
+                                <!--<span v-if="tools.isMobile()"><br/></span>-->
                                 <span class="cal__where-title">{{$t('cal.where')}}: </span>
                                 <span class="cal__where-content">
                                     <q-chip>
@@ -60,6 +67,12 @@
                                     </q-chip>
                                 </span>
                             </div>
+                            <div v-if="myevent.price && isShowPrice(myevent)" class="cal__quota">
+                                <span class="cal__quota-title">{{$t('event.price')}}:</span>
+                                <q-chip>
+                                    <span class="cal__quota-content">{{getPrice(myevent)}}</span>
+                                </q-chip>
+                            </div>
                             <div v-if="myevent.dateTimeStart" class="cal__when">
                                 <span class="cal__where-title">{{$t('cal.when')}}: </span>
                                 <span class="cal__where-content">{{ tools.getstrDate(myevent.dateTimeStart)}} - {{ tools.getstrDate(myevent.dateTimeEnd)}}</span>
@@ -69,7 +82,7 @@
                                         <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
                                     </span>
                                 <span v-else>
-                                        <span v-if="!func_tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
+                                        <span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
                                               class="cal__hours">
                                              -
                                             <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
@@ -109,16 +122,22 @@
                         <q-form
                                 v-if="contextDay"
                                 ref='myevent'
-                                class="q-gutter-md">
+                                class="q-gutter-sm">
-                            <q-input v-model="eventForm.title" autofocus label="Title"
+                            <q-input color="grey-1" v-model="eventForm.title" autofocus
+                                     :input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
+                                     borderless rounded dense :label="$t('event.title')"
                                      :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>
+                            <CMyEditor :value.sync="eventForm.details">
+
+                            </CMyEditor>
+
                             <!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
 
-                            <div class="q-gutter-sm">
+                            <div class="q-gutter-sm row myflex">
                                 <q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
-                                         :label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##">
+                                         :label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##"
+                                         class="calendar_comp">
                                     <template #append>
                                         <q-icon name="event" class="cursor-pointer">
                                             <q-popup-proxy v-model="showDateTimeScrollerStart">
@@ -143,7 +162,8 @@
                                     </template>
                                 </q-input>
                                 <q-input color="blue-6" outlined v-model="eventForm.dateTimeEnd"
-                                         :label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##">
+                                         :label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##"
+                                         class="calendar_comp">
                                     <template #append>
                                         <q-icon name="event" class="cursor-pointer">
                                             <q-popup-proxy v-model="showDateTimeScrollerEnd">
@@ -167,40 +187,93 @@
                                         </q-icon>
                                     </template>
                                 </q-input>
+                                <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
                             </div>
 
-                            <q-input dense v-model="eventForm.teacher" :label="$t('event.teacher')"></q-input>
+                            <div class="q-gutter-sm myflex">
-                            <q-input dense v-model="eventForm.teacher2" :label="$t('event.teacher2')"></q-input>
 
-                            <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
+                                <CMySelect myclass="myflex" :label="$t('cal.teacher') + ' 1°'"
+                                           :value.sync="eventForm.teacher"
+                                           optval="username" :optlab="(item) => item.name + ' ' + item.surname"
+                                           :options="getTeachersArr" :useinput="false">
+                                </CMySelect>
+                                <CMySelect myclass="myflex" :label="$t('cal.teacher') + ' 2°'"
+                                           :value.sync="eventForm.teacher2"
+                                           optval="username" :optlab="(item) => item.name + ' ' + item.surname"
+                                           :options="getTeachersArr" :useinput="false">
+                                </CMySelect>
+                            </div>
+
+                            <div class="q-gutter-sm myflex wrap">
+                                <CMySelect :label="$t('cal.where')" :value.sync="eventForm.wherecode" optval="code"
+                                           optlab="placename"
+                                           :options="getWhereArr" :useinput="false">
+                                </CMySelect>
+                                <q-checkbox class="myflex wrap" dense v-model="eventForm.news"
+                                            :label="$t('event.news')"></q-checkbox>
+                                <q-checkbox class="myflex wrap" dense v-model="eventForm.nobookable"
+                                            :label="$t('event.nobookable')"></q-checkbox>
+                                <q-checkbox class="myflex wrap" dense v-model="eventForm.canceled"
+                                            :label="$t('event.canceled')"></q-checkbox>
+                            </div>
+
+                            <div class="q-gutter-sm row items-start">
+
+                            </div>
+
+                            <div class="q-gutter-sm myflex">
+
+                                <q-input class="myflex" dense v-model="eventForm.img"
+                                         :label="$t('event.img')"></q-input>
+                                <q-input class="myflex" dense v-model="eventForm.img_small"
+                                         :label="$t('event.img_small')"></q-input>
+
+                            </div>
+
+                            <div class="q-gutter-sm myflex">
 
-                            <q-input dense v-model="eventForm.icon" label="Icon"></q-input>
                                 <q-input
+                                        class="myflex"
+                                        :style="`background-color: ${eventForm.bgcolor} !important; color: white !important;`"
                                         filled
+                                        color="white"
+                                        dense
+                                        :label="$t('event.bgcolor')"
                                         v-model="eventForm.bgcolor">
                                     <template #append>
-                                    <q-icon name="colorize" class="cursor-pointer">
+                                        <q-icon name="colorize" class="cursor-pointer" color="white">
                                             <q-popup-proxy>
-                                            <q-color v-model="eventForm.bgcolor"></q-color>
+                                                <q-color format-model="hex" v-model="eventForm.bgcolor"></q-color>
                                             </q-popup-proxy>
                                         </q-icon>
                                     </template>
                                 </q-input>
+                                <q-input class="myflex" dense v-model="eventForm.icon"
+                                         :label="$t('event.icon')"></q-input>
+                            </div>
 
-                            <q-input dense v-model="eventForm.img" :label="$t('event.img')"></q-input>
+                            <div class="q-gutter-sm myflex">
-                            <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>
+                                <CMySelect :label="$t('event.contribtype')" :value.sync="eventForm.contribtype"
-                            <q-input dense v-model="eventForm.linkpdf" :label="$t('event.linkpdf')"></q-input>
+                                           optval="_id" optlab="label"
-                            <q-checkbox dense v-model="eventForm.news" :label="$t('event.news')"></q-checkbox>
+                                           :useinput="false"
-                            <q-checkbox dense v-model="eventForm.nobookable" :label="$t('event.nobookable')"></q-checkbox>
+                                           :newvaluefunc="createContribType" :options="getContribTypeArr">
-                            <q-checkbox dense v-model="eventForm.canceled" :label="$t('event.canceled')"></q-checkbox>
+                                </CMySelect>
 
+                                <div v-if="isShowPrice(eventForm)">
+                                    <q-input dense type="number" v-model="eventForm.price"
+                                             :label="$t('event.price')"></q-input>
+                                    <q-input dense v-model="eventForm.infoafterprice"
+                                             :label="$t('event.infoafterprice')"></q-input>
+                                </div>
+                            </div>
 
+                            <div class="q-gutter-sm myflex">
+                                <q-input class="myflex" dense v-model="eventForm.linkpage"
+                                         :label="$t('event.linkpage')"></q-input>
+                                <q-input class="myflex" dense v-model="eventForm.linkpdf"
+                                         :label="$t('event.linkpdf')"></q-input>
+                            </div>
 
                         </q-form>
                     </q-card-section>
@@ -221,23 +294,28 @@
                     </q-toolbar>
 
                     <q-card-section class="inset-shadow">
-                        <q-img :src="`../../statics/`+myevent.img"
+                        <q-img :src="getImgEvent(myevent)"
                                class="absolute-top"
                                style="height: 150px;">
                         </q-img>
                         <div style="margin-top: 150px;">
 
-                            <div class="cal__title">{{myevent.title}}</div>
+                            <q-chip
+                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                                    text-color="white"
+                                    class="shadow-5 q-mb-md" dense>
+                                {{myevent.title}}
+                            </q-chip>
                             <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.dateTimeStart)}}</span>
-                                <span v-if="func_tools.hasManyDays(myevent.dateTimeStart)" class="cal__where-content"> - {{func_tools.getDateStr(myevent.dateTimeEnd)}}<br/></span>
+                                <span v-if="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="!func_tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
+                                        <span v-if="!tools.hasManyDays(myevent.dateTimeStart, myevent.dateTimeEnd)"
                                               class="cal__hours">
                                              -
                                             <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
@@ -262,7 +340,7 @@
                                                 :label="$t('cal.bookingtextdefault')" color="green">
                                         </q-checkbox>
 
-                                        <div v-if="bookEventForm.booked" class="q-gutter-md centermydiv"
+                                        <div v-if="bookEventForm.booked" class="q-gutter-sm centermydiv"
                                              style="max-width: 150px; margin-top:10px;">
                                             <q-select
                                                     rounded outlined v-model="bookEventForm.numpeople"
@@ -380,7 +458,7 @@
                                     :class="badgeClasses(event, 'day')"
                                     :style="badgeStyles(event, 'day')"
                                     @click.stop.prevent="showEvent(event)"
-                                    :draggable="true"
+                                    :draggable="tools.isManager()"
                                     @dragstart.native="(e) => onDragStart(e, event)"
                                     @dragend.native="(e) => onDragEnd(e, event)"
                                     @dragenter.native="(e) => onDragEnter(e, event)"
@@ -430,7 +508,7 @@
                                     :class="badgeClasses(event, 'body')"
                                     :style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
                                     @click.stop.prevent="showEvent(event)"
-                                    :draggable="true"
+                                    :draggable="tools.isManager()"
                                     @dragstart.native="(e) => onDragStart(e, event)"
                                     @dragend.native="(e) => onDragEnd(e, event)"
                                     @dragenter.native="(e) => onDragEnter(e, event)"
@@ -453,14 +531,20 @@
                 <tbody>
                 <tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
                     <td :class="clEvent(event)">
-                        <p class="listaev__align_center_mobile">
+                        <p class="listaev__align_chips">
-                            <img :src="`../../statics/`+event.img"
+                            <img :src="getImgEvent(event)"
                                  class="text-left padding_cell listaev__tdimg listaev__img">
-                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5"
+                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5 q-mb-md"
                                     color="green" text-color="white"
-                                    icon="event_available"
+                                    icon="event_available">{{$t('cal.booked')}}
-                                    dense>{{$t('cal.booked')}}
                             </q-chip>
+
+                            <q-chip v-if="event.news" class="cltexth4 chipnews shadow-5 glossy text-right" color="red"
+                                    text-color="white" icon-right="star" icon="star" dense
+                                    style="">
+                                {{$t('event.news')}}
+                            </q-chip>
+
                         </p>
                         <div class="listaev__date listaev__align_center_mobile">
 
@@ -476,11 +560,11 @@
                             </div>
                         </div>
 
-                        <div class="">
+                        <div class="listaev__align_center_mobile">
 
                             <div style="margin: 10px;"></div>
 
-                            <div class="listaev__align_center_mobile">
+                            <div class="">
                                 <!-- Se c'è un link, allora -->
                                 <q-btn v-if="event.linkpdf" size="md" type="a"
                                        :href="`../../statics/` + event.linkpdf"
@@ -491,11 +575,13 @@
                                 </q-btn>
                                 <!-- altrimenti mostra solo Chip -->
                                 <div v-else>
-                                    <div v-if="tools.isMobile()" class="cltexth3"
+                                    <div v-if="tools.isMobile()" class="cltexth3 text-center"
                                          :style="`background-color: ${event.bgcolor} !important; color: white !important;`">
                                         {{event.title}}
                                     </div>
-                                    <q-chip v-else class="cltexth3" :color="event.bgcolor" text-color="white"
+                                    <q-chip v-else class="cltexth3 text-center"
+                                            :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
+                                            text-color="white"
                                             :icon="event.icon"
                                             dense>{{event.title}}
                                     </q-chip>
@@ -537,6 +623,22 @@
                                         </q-chip>
                                     </span>
                             </div>
+                            <div v-if="event.contribtype" class="">
+                                <span class="cal__quota-title">{{$t('event.price')}}:<span
+                                        class="margin_with"></span></span>
+                                <span v-if="!isShowPrice(event)" class="">
+                                    <q-chip class="glossy" color="orange" text-color="white">
+                                        <span class="cal__quota-content">{{getContribtypeById(event.contribtype)}}</span>
+                                    </q-chip>
+                                </span>
+
+                                <q-chip v-if="event.price && isShowPrice(event)" class="glossy" color="orange"
+                                        text-color="white" icon-right="star">
+                                    <span class="cal__quota-content">{{getPrice(event)}}</span>
+                                </q-chip>
+                            </div>
+
+
                             <p class="text-center">
                                         <span v-if="event.linkpdf" class="">
                                             <q-btn size="md" type="a" :href="`../../statics/` + event.linkpdf"

src/components/index.ts

@@ -6,6 +6,8 @@ export * from './CCard'
 export * from './CBook'
 export * from './CMyPage'
 export * from './CTitle'
+export * from './CMySelect'
+export * from './CMyEditor'
 export * from './CImgText'
 export * from './CImgTitle'
 export * from './CPreloadImages'

src/model/Calendar.ts

@@ -62,6 +62,12 @@ export interface IWheres {
   whereicon: string
 }
 
+export interface IContribtype {
+  _id: any
+  label: string
+  showprice: boolean
+}
+
 export enum EState {
   None, Creating, Modifying
 }
@@ -78,6 +84,7 @@ export interface ICalendarState {
   bookedevent: IBookedEvent[]
   operators: IOperators[]
   wheres: IWheres[]
+  contribtype: IContribtype[]
   // ---------------
   titlebarHeight: number
   locale: string,

src/statics/i18n.js

@@ -207,13 +207,13 @@ const msgglobal = {
       hours: 'Orario',
       when: 'Quando',
       where: 'Dove',
-      teacher: 'Con',
+      teacher: 'Condotto da',
       enterdate: 'Inserisci data',
       details: 'Dettagli',
       infoextra: 'Date e Ora Extra:',
       alldayevent: 'Tutto il giorno',
-      eventstartdatetime: 'Data e Ora Inizio Evento',
+      eventstartdatetime: 'Inizio',
-      enterEndDateTime: 'Data e Ora Fine Evento',
+      enterEndDateTime: 'Fine',
       selnumpeople: 'Partecipanti',
       selnumpeople_short: 'Num',
       msgbooking: 'Messaggio da inviare',
@@ -238,14 +238,15 @@ const msgglobal = {
       img_small: 'Img Piccola',
       where: 'Dove',
       contribtype: 'Tipo Contributo',
-      price: 'Quota',
+      price: 'Contributo',
+      askinfo: 'Chiedi Info',
       infoafterprice: 'Note dopo la Quota',
       teacher: 'Insegnante',  // teacherid
       teacher2: 'Insegnante2', // teacherid2
       infoextra: 'InfoExtra',
       linkpage: 'WebSite',
       linkpdf: 'Link ad un PDF',
-      nobookable: 'No Prenotabile',
+      nobookable: 'Non Prenotabile',
       news: 'Novità',
       dupId: 'Id Duplicato',
       canceled: 'Cancellato',
@@ -470,13 +471,13 @@ const msgglobal = {
       hours: 'Tiempo',
       when: 'Cuando',
       where: 'Donde',
-      teacher: 'Con',
+      teacher: 'Dirigido por',
       enterdate: 'Ingresar la fecha',
       details: 'Detalles',
       infoextra: 'Fecha y Hora Extras:',
       alldayevent: 'Todo el dia',
-      eventstartdatetime: 'Evento de inicio de fecha y hora',
+      eventstartdatetime: 'Inicio',
-      enterEndDateTime: 'Fecha y hora del evento final',
+      enterEndDateTime: 'final',
       selnumpeople: 'Partecipantes',
       selnumpeople_short: 'Num',
       msgbooking: 'Mensaje para enviar',
@@ -502,6 +503,7 @@ const msgglobal = {
       where: 'Dónde',
       contribtype: 'Tipo de Contribución',
       price: 'Precio',
+      askinfo: 'Solicitar información',
       infoafterprice: 'notas después del precio',
       teacher: 'Profesor',  // teacherid
       teacher2: 'Profesor2', // teacherid2
@@ -732,13 +734,13 @@ const msgglobal = {
       hours: 'Le temps',
       when: 'Quand',
       where: 'Où',
-      teacher: 'Avec',
+      teacher: 'Dirigé par',
       enterdate: 'Entrez la date',
       details: 'Les détails',
       infoextra: 'Extras Date et heure:',
       alldayevent: 'Toute la journée',
-      eventstartdatetime: 'Date de début et heure de l\'événement',
+      eventstartdatetime: 'début',
-      enterEndDateTime: 'Date et heure de l\'événement final',
+      enterEndDateTime: 'final',
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message à envoyer',
@@ -764,6 +766,7 @@ const msgglobal = {
       where: 'Où',
       contribtype: 'Type de contribution',
       price: 'Prix',
+      askinfo: 'Demander des infos',
       infoafterprice: 'Notes après le prix',
       teacher: 'Enseignant',  // teacherid
       teacher2: 'Enseignant2', // teacherid2
@@ -993,13 +996,13 @@ const msgglobal = {
       hours: 'Hours',
       when: 'When',
       where: 'Where',
-      teacher: 'With',
+      teacher: 'Led by',
       enterdate: 'Enter date',
       details: 'Details',
       infoextra: 'Extra Info DateTime',
       alldayevent: 'All-Day myevent',
-      eventstartdatetime: 'Event start date and time',
+      eventstartdatetime: 'Start',
-      enterEndDateTime: 'Event end date and time',
+      enterEndDateTime: 'End',
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
@@ -1025,6 +1028,7 @@ const msgglobal = {
       where: 'Qhere',
       contribtype: 'Contribute Type',
       price: 'Price',
+      askinfo: 'Ask for Info',
       infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2
@@ -1256,13 +1260,13 @@ const msgglobal = {
       hours: 'Hours',
       when: 'When',
       where: 'Where',
-      teacher: 'With',
+      teacher: 'Led by',
       enterdate: 'Enter date',
       details: 'Details',
       infoextra: 'Extra Info DateTime',
       alldayevent: 'All-Day myevent',
-      eventstartdatetime: 'Event start date and time',
+      eventstartdatetime: 'Start',
-      enterEndDateTime: 'Event end date and time',
+      enterEndDateTime: 'End',
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
@@ -1288,6 +1292,7 @@ const msgglobal = {
       where: 'Qhere',
       contribtype: 'Contribute Type',
       price: 'Price',
+      askinfo: 'Ask for Info',
       infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2

src/store/Modules/GlobalStore.ts

@@ -276,6 +276,8 @@ namespace Mutations {
       return CalendarStore.state.operators
     else if (table === 'wheres')
       return CalendarStore.state.wheres
+    else if (table === 'contribtype')
+      return CalendarStore.state.contribtype
     else if (table === 'bookings')
       return CalendarStore.state.bookedevent
     else if (table === 'users')
@@ -493,6 +495,8 @@ namespace Actions {
     // console.log('loadAfterLogin')
     actions.clearDataAfterLoginOnlyIfActiveConnection()
 
+    await Actions.actions.loadSite()
+
     state.arrConfig = await globalroutines(null, 'readall', 'config', null)
   }
 
@@ -624,10 +628,39 @@ namespace Actions {
       })
   }
 
+  async function loadSite(context) {
+    // console.log('CalendarStore: loadAfterLogin')
+    // Load local data
+    CalendarStore.state.editable = UserStore.state.isAdmin || UserStore.state.isManager
+
+    const showall = UserStore.state.isAdmin || UserStore.state.isManager ? '1' : '0'
+
+    const myuserid = (UserStore.state.userId) ? UserStore.state.userId : '0'
+
+    const ris = await Api.SendReq('/loadsite/' + myuserid + '/' + process.env.APP_ID + '/' + showall, 'GET', null)
+      .then((res) => {
+        CalendarStore.state.bookedevent = (res.data.bookedevent) ? res.data.bookedevent : []
+        CalendarStore.state.eventlist = (res.data.eventlist) ? res.data.eventlist : []
+        CalendarStore.state.operators = (res.data.operators) ? res.data.operators : []
+        CalendarStore.state.wheres = (res.data.wheres) ? res.data.wheres : []
+        CalendarStore.state.contribtype = (res.data.contribtype) ? res.data.contribtype : []
+
+      })
+      .catch((error) => {
+        console.log('error dbLoad', error)
+        // UserStore.mutations.setErrorCatch(error)
+        return new Types.AxiosError(serv_constants.RIS_CODE_ERR, null, tools.ERR_GENERICO, error)
+      })
+
+    return ris
+
+  }
+
   export const actions = {
     setConta: b.dispatch(setConta),
     createPushSubscription: b.dispatch(createPushSubscription),
     loadAfterLogin: b.dispatch(loadAfterLogin),
+    loadSite: b.dispatch(loadSite),
     clearDataAfterLogout: b.dispatch(clearDataAfterLogout),
     clearDataAfterLoginOnlyIfActiveConnection: b.dispatch(clearDataAfterLoginOnlyIfActiveConnection),
     prova: b.dispatch(prova),

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

@@ -19,6 +19,7 @@ const state: ICalendarState = {
   bookedevent: [],
   operators: [],
   wheres: [],
+  contribtype: [],
   // ---------------
   titlebarHeight: 0,
   locale: 'it-IT',
@@ -82,6 +83,23 @@ namespace Getters {
 
   }, 'getWhereRec')
 
+  const getContribtypeRec = b.read((mystate: ICalendarState) => (id) => {
+    const ctrec = mystate.contribtype.find((mycontr) => mycontr._id === id)
+    return (ctrec)
+
+  }, 'getContribtypeRec')
+
+  const getContribtypeById = b.read((mystate: ICalendarState) => (id) => {
+    const ctrec = mystate.contribtype.find((mycontr) => mycontr._id === id)
+    return (ctrec) ? ctrec.label : ''
+
+  }, 'getContribtypeById')
+  const getContribtypeRecByLabel = b.read((mystate: ICalendarState) => (label) => {
+    const ctrec = mystate.contribtype.find((mycontr) => mycontr.label === label)
+    return (ctrec)
+
+  }, 'getContribtypeRecByLabel')
+
   export const getters = {
     get findEventBooked() {
       return findEventBooked()
@@ -98,6 +116,15 @@ namespace Getters {
     get getWhereRec() {
       return getWhereRec()
     },
+    get getContribtypeRec() {
+      return getContribtypeRec()
+    },
+    get getContribtypeById() {
+      return getContribtypeById()
+    },
+    get getContribtypeRecByLabel() {
+      return getContribtypeRecByLabel()
+    },
     get getTeacherName() {
       return getTeacherName()
     }
@@ -117,40 +144,6 @@ namespace Mutations {
 }
 
 namespace Actions {
-  async function loadAfterLogin(context) {
-    // console.log('CalendarStore: loadAfterLogin')
-    // Load local data
-    state.editable = UserStore.state.isAdmin || UserStore.state.isManager
-
-    if (UserStore.getters.isUserInvalid) {
-      state.bookedevent = []
-      return false
-    }
-
-    // Load local data
-    // console.log('CALENDAR loadAfterLogin', 'userid=', UserStore.state.userId)
-
-    let ris = null
-
-    const showall = UserStore.state.isAdmin || UserStore.state.isManager ? '1' : '0'
-
-    ris = await Api.SendReq('/booking/' + UserStore.state.userId + '/' + process.env.APP_ID + '/' + showall, 'GET', null)
-      .then((res) => {
-        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) => {
-        console.log('error dbLoad', error)
-        // UserStore.mutations.setErrorCatch(error)
-        return new Types.AxiosError(serv_constants.RIS_CODE_ERR, null, tools.ERR_GENERICO, error)
-      })
-
-    return ris
-
-  }
 
   function getparambyevent(bookevent) {
     return {
@@ -222,7 +215,6 @@ namespace Actions {
   }
 
   export const actions = {
-    loadAfterLogin: b.dispatch(loadAfterLogin),
     BookEvent: b.dispatch(BookEvent),
     CancelBookingEvent: b.dispatch(CancelBookingEvent)
   }

src/store/Modules/UserStore.ts

@@ -621,8 +621,6 @@ namespace Actions {
       GlobalStore.actions.checkUpdates()
     }
 
-    const p2 = await CalendarStore.actions.loadAfterLogin()
-
     const p3 = await GlobalStore.actions.loadAfterLogin()
 
     if (static_data.functionality.ENABLE_TODOS_LOADING)

src/store/Modules/tools.ts

@@ -1628,8 +1628,17 @@ export const tools = {
     } else {
       return 'red'
     }
-  }
+  },
-  ,
+  hasManyDays(mydatestart, mydateend) {
+    if (mydateend)
+      return tools.getstrDate(mydatestart) !== tools.getstrDate(mydateend)
+    else
+      return false
+  },
+
+  isManager() {
+    return UserStore.state.isManager
+  },
 
   getstrDate(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
@@ -1654,6 +1663,14 @@ export const tools = {
     else
       return ''
   },
+
+  getstrDateEmailTime(mythis, mytimestamp) {
+    // console.log('getstrDate', mytimestamp)
+    if (!!mytimestamp)
+      return date.formatDate(mytimestamp, 'DD/MM/YYYY') + ' ' + mythis.$t('starttime') + ' ' + date.formatDate(mytimestamp, 'HH:mm')
+    else
+      return ''
+  },
   getstrMMMDate(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
     if (!!mytimestamp)
@@ -1927,7 +1944,7 @@ export const tools = {
 
   myheight_dialog() {
     if (Screen.width < 400) {
-      return '350'
+      return '337'
     } else if (Screen.width < 600) {
       return '400'
     } else {
@@ -2033,6 +2050,10 @@ export const tools = {
     return date.addToDate(mydate, { days })
   },
 
+  addMinutes(mydate, minutes) {
+    return date.addToDate(mydate, { minutes })
+  },
+
   gettitlemain(datamain: ITimeLineMain) {
     if (datamain.titlemain[toolsext.getLocale()])
       return datamain.titlemain[toolsext.getLocale()]
@@ -2144,9 +2165,9 @@ export const tools = {
 
     return msg
   },
-  gettextevent(myevent: IEvents) {
+  gettextevent(mythis, myevent: IEvents) {
     // return '"' + myevent.title + '" (' + func_tools.getDateStr(myevent.date) + ') - ' + myevent.time
-    return '"' + myevent.title + '" (' + tools.getstrDateTime(myevent.dateTimeStart)
+    return '"' + myevent.title + '" (' + tools.getstrDateEmailTime(mythis, myevent.dateTimeStart) + ')'
   },
 
   setLangAtt(mylang) {
@@ -2282,21 +2303,21 @@ export const tools = {
   },
   displayClasses(eventparam) {
     return {
-      [`bg-${eventparam.bgcolor}`]: !tools.isCssColor(eventparam.bgcolor),
+      // [`bg-${eventparam.bgcolor}`]: !tools.isCssColor(eventparam.bgcolor),
       'text-white': !tools.isCssColor(eventparam.bgcolor)
     }
   },
   displayStyles(eventparam) {
     const s = { color: '' }
     if (tools.isCssColor(eventparam.bgcolor)) {
-      s['background-color'] = eventparam.bgcolor
+      // s['background-color'] = eventparam.bgcolor
       s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
     }
     return s
   },
   CancelBookingEvent(mythis, eventparam: IEvents, bookeventid: string, notify: boolean) {
     console.log('CancelBookingEvent ', eventparam)
-    tools.askConfirm(mythis.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, '', lists.MenuAction.DELETE, 0, {
+    tools.askConfirm(mythis.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(mythis, eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), mythis, '', lists.MenuAction.DELETE, 0, {
       param1: bookeventid,
       param2: notify
     })
@@ -2308,6 +2329,25 @@ export const tools = {
       param2: item
     })
   },
+
+  async createNewRecord(mythis, table, data) {
+
+    const mydata = {
+      table,
+      data
+    }
+
+    return await GlobalStore.actions.saveTable(mydata)
+      .then((record) => {
+        if (record) {
+          tools.showPositiveNotif(mythis.$q, mythis.$t('db.recupdated'))
+        } else {
+          tools.showNegativeNotif(mythis.$q, mythis.$t('db.recfailed'))
+        }
+        return record
+      })
+  },
+
   isBitActive(bit, whattofind) {
     return ((bit & whattofind) === whattofind)
   }

src/store/Modules/toolsext.ts

@@ -34,18 +34,17 @@ export const func_tools = {
       year: 'numeric'
       // timeZone: 'UTC'
     })
+    try {
+      console.log('mydate', mydate, DateFormatter)
       if (DateFormatter) {
         const date1 = new Date(mydate)
         return DateFormatter.format(date1)
       }
       return mydate
-  },
+    }catch (e) {
+      return ''
+    }
 
-  hasManyDays(mydatestart, mydateend) {
-    if (mydateend)
-      return this.getDateStr(mydatestart) !== this.getDateStr(mydateend)
-    else
-      return false
   },
 
   getMinutesDuration(mydatestart, mydateend) {