From 53930925423756e73f93dd448b8470109d4b3eba Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Thu, 7 Nov 2019 18:57:41 +0100
Subject: [PATCH]  - Using CEventsCalendar also for show a Single Event, with
 his button edit/add/duplicate...

---
 .../CEventsCalendar/CEventsCalendar.ts        |  17 +-
 .../CEventsCalendar/CEventsCalendar.vue       | 942 +++++++++---------
 .../CMySingleEvent/CMySingleEvent.scss        |  86 ++
 .../CMySingleEvent/CMySingleEvent.ts          |  85 ++
 .../CMySingleEvent/CMySingleEvent.vue         | 172 ++++
 src/components/CMySingleEvent/index.ts        |   1 +
 src/components/index.ts                       |   1 +
 src/store/Modules/UserStore.ts                |   1 +
 8 files changed, 845 insertions(+), 460 deletions(-)
 create mode 100644 src/components/CMySingleEvent/CMySingleEvent.scss
 create mode 100644 src/components/CMySingleEvent/CMySingleEvent.ts
 create mode 100644 src/components/CMySingleEvent/CMySingleEvent.vue
 create mode 100644 src/components/CMySingleEvent/index.ts

diff --git a/src/components/CEventsCalendar/CEventsCalendar.ts b/src/components/CEventsCalendar/CEventsCalendar.ts
index c4c5fd9..afd6f96 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.ts
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -35,13 +35,15 @@ import MixinOperator from '../../mixins/mixin-operator'
 import MixinEvents from '../../mixins/mixin-events'
 import { CDateTime } from '../CDateTime'
 import { CMyAvatar } from '../CMyAvatar'
+import { CMySingleEvent } from '../CMySingleEvent'
 
 @Component({
   mixins: [MixinOperator, MixinUsers, MixinEvents],
   name: 'CEventsCalendar',
-  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor, CDateTime, CMyAvatar }
+  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor, CDateTime, CMyAvatar, CMySingleEvent }
 })
 export default class CEventsCalendar extends MixinEvents {
+  @Prop ({required: false, default: null}) public mysingleevent: IEvents
   public $q
   public $t: any
   public calendarView = 'month'
@@ -191,6 +193,10 @@ export default class CEventsCalendar extends MixinEvents {
   //     }
   //   ]
 
+  get visuAllCal() {
+    return this.mysingleevent === null
+  }
+
   get title_cal() {
     if (this.titleFormatter && this.locale) {
       const mydate = new Date(this.selectedDate)
@@ -986,6 +992,15 @@ export default class CEventsCalendar extends MixinEvents {
     return eventsloc
   }
 
+  public isEventEnabled(myevent) {
+    // check if event is in the past
+    const datenow = tools.addDays(tools.getDateNow(), -1)
+
+    // console.log('datenow', datenow, 'end', myevent.dateTimeEnd)
+
+    return (new Date(myevent.dateTimeEnd) >= datenow)
+  }
+
   public getTitleEv(event: IEvents) {
     return (!!event.short_tit) ? event.short_tit : event.title
   }
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
index 52d7f79..c03a801 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -1,59 +1,59 @@
 <template>
     <div class="landing">
-        <q-page class="column" style="min-height: 500px !important;">
-            <!-- display an myevent -->
-            <q-dialog v-model="displayEvent">
-                <q-card v-if="myevent">
-                    <q-toolbar class="bg-primary text-white" :style="`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>
-                        <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
-                            <q-menu
-                                    transition-show="flip-right"
-                                    transition-hide="flip-left">
-                                <q-list style="min-width: 100px">
-                                    <q-item clickable @click="duplicateEvent(myevent, 7)">
-                                        <q-item-section>Tra 1 Settimana</q-item-section>
-                                    </q-item>
-                                    <q-item clickable @click="duplicateEvent(myevent, 14)">
-                                        <q-item-section>Tra 2 Settimane</q-item-section>
-                                    </q-item>
-                                    <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
-                                        <q-item-section>4 Eventi ogni Settimana</q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn>
-                        <q-btn v-if="editable" flat round color="white" icon="delete" v-close-popup
-                               @click="deleteEvent(myevent)"></q-btn>
-                        <q-btn v-if="editable" flat round color="white" icon="edit" v-close-popup
-                               @click="editEvent(myevent)"></q-btn>
-                        <q-btn flat round color="white" icon="cancel" v-close-popup @click="myevent = null; displayEvent = false"></q-btn>
-                    </q-toolbar>
-                    <q-card-section class="inset-shadow">
-                        <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>-->
+        <!-- display an myevent -->
+        <q-dialog v-model="displayEvent">
+            <q-card v-if="myevent">
+                <q-toolbar class="bg-primary text-white" :style="`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>
+                    <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
+                        <q-menu
+                                transition-show="flip-right"
+                                transition-hide="flip-left">
+                            <q-list style="min-width: 100px">
+                                <q-item clickable @click="duplicateEvent(myevent, 7)">
+                                    <q-item-section>Tra 1 Settimana</q-item-section>
+                                </q-item>
+                                <q-item clickable @click="duplicateEvent(myevent, 14)">
+                                    <q-item-section>Tra 2 Settimane</q-item-section>
+                                </q-item>
+                                <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
+                                    <q-item-section>4 Eventi ogni Settimana</q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-menu>
+                    </q-btn>
+                    <q-btn v-if="editable" flat round color="white" icon="delete" v-close-popup
+                           @click="deleteEvent(myevent)"></q-btn>
+                    <q-btn v-if="editable" flat round color="white" icon="edit" v-close-popup
+                           @click="editEvent(myevent)"></q-btn>
+                    <q-btn flat round color="white" icon="cancel" v-close-popup
+                           @click="myevent = null; displayEvent = false"></q-btn>
+                </q-toolbar>
+                <q-card-section class="inset-shadow">
+                    <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>-->
 
 
-                            <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">
+                        <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
                                             class="margin_with"></span></span>
-                                <!--<span class="cal__teacher-content">{{myevent.teacher}}</span>-->
-                                <span class="cal__teacher-content">
+                            <!--<span class="cal__teacher-content">{{myevent.teacher}}</span>-->
+                            <span class="cal__teacher-content">
                                     <q-chip>
                                         <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher)"></CMyAvatar>
                                         <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher)}}</span>
@@ -65,11 +65,11 @@
                                         <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher2)}}</span>
                                     </q-chip>
                                 </span>
-                            </div>
-                            <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">
+                        </div>
+                        <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="getWhereIcon(myevent.wherecode)">
                                             <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
@@ -79,304 +79,305 @@
                                         <span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
                                     </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 v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
-                                </span>
-                            </div>
-                            <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
-                                <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
-                                       target="_blank" rounded color="primary" icon="info" :label="$t('cal.showinfo')">
-                                </q-btn>
-                            </p>
                         </div>
-                    </q-card-section>
-                    <q-card-actions align="right">
-                        <q-btn rounded v-if="!myevent.nobookable && static_data.functionality.BOOKING_EVENTS"
-                               color="primary" @click="addBookEventMenu(myevent)" :disable="!isEventEnabled(myevent)"
-                               :label="$t('cal.booking')">
-                        </q-btn>
-                        <q-btn v-else :label="$t('dialog.ok')" color="primary" v-close-popup></q-btn>
-                    </q-card-actions>
-                </q-card>
-            </q-dialog>
-            <!-- 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 }} {{ $t('cal.event') }}
-                        </q-toolbar-title>
-                        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
-                    </q-toolbar>
-                    <q-card-section class="inset-shadow">
-                        <q-form
-                                v-if="contextDay"
-                                ref='myevent'
-                                class="q-gutter-sm">
-                            <q-input color="grey-1" v-model="eventForm.short_tit" autofocus
-                                     :input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
-                                     borderless rounded dense :label="$t('event.short_tit')"
-                            ></q-input>
-
-                            <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 || $t('event.notempty')]"></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 row myflex">
-                                <CDateTime
-                                        :value.sync="eventForm.dateTimeStart"
-                                        :label="$t('cal.eventstartdatetime')"
-                                        :readonly="false">
-                                </CDateTime>
-                                <CDateTime
-                                        :value.sync="eventForm.dateTimeEnd"
-                                        :label="$t('cal.enterEndDateTime')"
-                                        :readonly="false">
-                                </CDateTime>
-                                <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
-                            </div>
-
-                            <div class="q-gutter-sm myflex">
-
-                                <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
-                                        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" color="white">
-                                            <q-popup-proxy>
-                                                <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>
-
-                            <div class="q-gutter-sm myflex">
-
-                                <CMySelect :label="$t('event.contribtype')" :value.sync="eventForm.contribtype"
-                                           optval="_id" optlab="label"
-                                           :useinput="false"
-                                           :newvaluefunc="createContribType" :options="getContribTypeArr">
-                                </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>
-                    <q-card-actions align="right">
-                        <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveEvent"></q-btn>
-                        <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
-                    </q-card-actions>
-                </q-card>
-            </q-dialog>
-
-            <q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
-                <q-card v-if="bookEventpage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
-                    <q-toolbar class="bg-primary text-white">
-                        <q-toolbar-title>
-                            {{$t('cal.booking')}}
-                        </q-toolbar-title>
-                        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
-                    </q-toolbar>
-
-                    <q-card-section class="inset-shadow">
-                        <q-img :src="getImgEvent(myevent)"
-                               class="absolute-top"
-                               style="height: 150px;">
-                        </q-img>
-                        <div style="margin-top: 150px;">
-
-                            <q-chip
-                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
-                                    text-color="white"
-                                    class="shadow-5 q-mb-md" dense>
-                                {{myevent.title}}
+                        <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 v-if="myevent.dateTimeStart" class="cal__when">
+                        </div>
+                        <div v-if="myevent.dateTimeStart" class="cal__when">
                                 <span class="cal__where-title">{{$t('cal.when')}}:
                                     <span v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></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>
-
-                                        <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"
-                                                    :options="tools.SelectListNumPeople"
-                                                    :label="$t('cal.selnumpeople')" emit-value map-options>
-                                            </q-select>
-                                        </div>
-
-                                        <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'"
-                                                 type="textarea" debounce="500"
-                                                 input-class="myinput-area"
-                                        >
-                                        </q-input>
-                                    </q-card-section>
-                                </q-card>
-
-
-                            </div>
-
-                            <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
-                                <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
-                                       target="_blank" rounded color="primary" icon="info" :label="$t('cal.showinfo')">
-                                </q-btn>
-                            </p>
                         </div>
-                    </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>
-                        <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendonlymsg')" 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>
+                        <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
+                            <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
+                                   target="_blank" rounded color="primary" icon="info" :label="$t('cal.showinfo')">
+                            </q-btn>
+                        </p>
+                    </div>
+                </q-card-section>
+                <q-card-actions align="right">
+                    <q-btn rounded v-if="!myevent.nobookable && static_data.functionality.BOOKING_EVENTS"
+                           color="primary" @click="addBookEventMenu(myevent)" :disable="!isEventEnabled(myevent)"
+                           :label="$t('cal.booking')">
+                    </q-btn>
+                    <q-btn v-else :label="$t('dialog.ok')" color="primary" v-close-popup></q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-dialog>
+        <!-- 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 }} {{ $t('cal.event') }}
+                    </q-toolbar-title>
+                    <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+                </q-toolbar>
+                <q-card-section class="inset-shadow">
+                    <q-form
+                            v-if="contextDay"
+                            ref='myevent'
+                            class="q-gutter-sm">
+                        <q-input color="grey-1" v-model="eventForm.short_tit" autofocus
+                                 :input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
+                                 borderless rounded dense :label="$t('event.short_tit')"
+                        ></q-input>
 
-                        <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
-                    </q-card-actions>
-                </q-card>
-            </q-dialog>
+                        <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 || $t('event.notempty')]"></q-input>
 
-            <q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
-                <q-card v-if="askInfopage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
-                    <q-toolbar class="bg-primary text-white">
-                        <q-toolbar-title>
-                            {{$t('cal.booking')}}
-                        </q-toolbar-title>
-                        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
-                    </q-toolbar>
+                        <CMyEditor :value.sync="eventForm.details">
 
-                    <q-card-section class="inset-shadow">
-                        <q-img :src="getImgEvent(myevent)"
-                               class="absolute-top"
-                               style="height: 150px;">
-                        </q-img>
-                        <div style="margin-top: 150px;">
+                        </CMyEditor>
 
-                            <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">
+                        <!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
+
+                        <div class="q-gutter-sm row myflex">
+                            <CDateTime
+                                    :value.sync="eventForm.dateTimeStart"
+                                    :label="$t('cal.eventstartdatetime')"
+                                    :readonly="false">
+                            </CDateTime>
+                            <CDateTime
+                                    :value.sync="eventForm.dateTimeEnd"
+                                    :label="$t('cal.enterEndDateTime')"
+                                    :readonly="false">
+                            </CDateTime>
+                            <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
+                        </div>
+
+                        <div class="q-gutter-sm myflex">
+
+                            <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
+                                    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" color="white">
+                                        <q-popup-proxy>
+                                            <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>
+
+                        <div class="q-gutter-sm myflex">
+
+                            <CMySelect :label="$t('event.contribtype')" :value.sync="eventForm.contribtype"
+                                       optval="_id" optlab="label"
+                                       :useinput="false"
+                                       :newvaluefunc="createContribType" :options="getContribTypeArr">
+                            </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>
+                <q-card-actions align="right">
+                    <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveEvent"></q-btn>
+                    <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-dialog>
+
+        <q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
+            <q-card v-if="bookEventpage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                <q-toolbar class="bg-primary text-white">
+                    <q-toolbar-title>
+                        {{$t('cal.booking')}}
+                    </q-toolbar-title>
+                    <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+                </q-toolbar>
+
+                <q-card-section class="inset-shadow">
+                    <q-img :src="getImgEvent(myevent)"
+                           class="absolute-top"
+                           style="height: 150px;">
+                    </q-img>
+                    <div style="margin-top: 150px;">
+
+                        <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 v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
                                 </span>
-                            </div>
-                            <div class="q-pa-xs">
-                                <q-card class="text-white windowcol">
-                                    <q-card-section>
-                                        <q-input v-model="askInfoForm.message" :label="$t('cal.msgbooking')+':'"
-                                                 autofocus debounce="500" type="textarea"
-                                                 input-class="myinput-area">
-                                        </q-input>
-                                    </q-card-section>
-                                </q-card>
-
-                            </div>
                         </div>
-                    </q-card-section>
-                    <q-card-actions align="right">
-                        <q-btn flat :label="$t('dialog.sendmsg')" color="primary"
-                               @click="sendMsg(myevent)"></q-btn>
-                        <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
-                    </q-card-actions>
-                </q-card>
-            </q-dialog>
+                        <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>
 
-            <!--v-touch-swipe.mouse.left.right="handleSwipe" -->
+                                    <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"
+                                                :options="tools.SelectListNumPeople"
+                                                :label="$t('cal.selnumpeople')" emit-value map-options>
+                                        </q-select>
+                                    </div>
 
-            <!-- the calendar -->
+                                    <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'"
+                                             type="textarea" debounce="500"
+                                             input-class="myinput-area"
+                                    >
+                                    </q-input>
+                                </q-card-section>
+                            </q-card>
 
-            <div>
+
+                        </div>
+
+                        <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
+                            <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
+                                   target="_blank" rounded color="primary" icon="info" :label="$t('cal.showinfo')">
+                            </q-btn>
+                        </p>
+                    </div>
+                </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>
+                    <q-btn v-if="checkseinviaMsg" flat :label="$t('dialog.sendonlymsg')" 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>
+
+
+                    <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-dialog>
+
+        <q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
+            <q-card v-if="askInfopage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                <q-toolbar class="bg-primary text-white">
+                    <q-toolbar-title>
+                        {{$t('cal.booking')}}
+                    </q-toolbar-title>
+                    <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+                </q-toolbar>
+
+                <q-card-section class="inset-shadow">
+                    <q-img :src="getImgEvent(myevent)"
+                           class="absolute-top"
+                           style="height: 150px;">
+                    </q-img>
+                    <div style="margin-top: 150px;">
+
+                        <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 v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
+                                </span>
+                        </div>
+                        <div class="q-pa-xs">
+                            <q-card class="text-white windowcol">
+                                <q-card-section>
+                                    <q-input v-model="askInfoForm.message" :label="$t('cal.msgbooking')+':'"
+                                             autofocus debounce="500" type="textarea"
+                                             input-class="myinput-area">
+                                    </q-input>
+                                </q-card-section>
+                            </q-card>
+
+                        </div>
+                    </div>
+                </q-card-section>
+                <q-card-actions align="right">
+                    <q-btn flat :label="$t('dialog.sendmsg')" color="primary"
+                           @click="sendMsg(myevent)"></q-btn>
+                    <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-dialog>
+
+        <!--v-touch-swipe.mouse.left.right="handleSwipe" -->
+
+        <!-- the calendar -->
+        <q-page v-if="visuAllCal" class="column" style="min-height: 500px !important;">
+
+            <div >
                 <q-toolbar class="mytoolbar">
                     <q-btn color="primary" round icon="keyboard_arrow_left" @click="calendarPrev"/>
                     <q-btn color="primary" round icon="keyboard_arrow_right" @click="calendarNext"/>
@@ -399,6 +400,7 @@
 
                 -->
                 <q-calendar
+                        v-if="visuAllCal"
                         ref="calendar"
                         class="calendar"
                         :key="keyValue"
@@ -519,115 +521,125 @@
         </q-page>
 
         <div class="q-mt-md">
-            <p class="text-subtitle1 text-red text-center">LISTA PROSSIMI EVENTI:</p>
+            <p v-if="visuAllCal" class="text-subtitle1 text-red text-center">LISTA PROSSIMI EVENTI:</p>
 
-            <q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
-                <tbody>
-                <tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
-                    <td :class="clEvent(event)">
-                        <div class="listaev__align_chips">
-                            <img :src="getImgEvent(event)"
-                                 @click="selectEvent(event)"
-                                 class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer q-mx-sm"
-                                :style="getStyleByEvent(event, event === myevent)">
-                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5 q-mb-md"
-                                    color="green" text-color="white"
-                                    icon="event_available">{{$t('cal.booked')}}
-                            </q-chip>
+            <!--<q-intersection-->
+            <!--v-for="index in 10"-->
+            <!--:key="index"-->
+            <!--transition="scale"-->
+            <!--class="example-item"-->
+            <!--&gt;-->
 
-                            <q-chip v-if="event === myevent && !displayEvent && editable" class="text-center shadow-5 glossy bg-blue chipmodif">
+            <div v-if="!mysingleevent">
+                <q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
+                    <tbody>
+                    <tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
+                        <td :class="clEvent(event)">
+                            <div class="listaev__align_chips">
+                                <img :src="getImgEvent(event)"
+                                     @click="selectEvent(event)"
+                                     class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer q-mx-sm"
+                                     :style="getStyleByEvent(event, event === myevent)">
+                                <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5 q-mb-md"
+                                        color="green" text-color="white"
+                                        icon="event_available">{{$t('cal.booked')}}
+                                </q-chip>
 
-                                <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
-                                    <q-menu
-                                            transition-show="flip-right"
-                                            transition-hide="flip-left">
-                                        <q-list style="min-width: 100px">
-                                            <q-item clickable @click="duplicateEvent(myevent, 7)">
-                                                <q-item-section>Tra 1 Settimana</q-item-section>
-                                            </q-item>
-                                            <q-item clickable @click="duplicateEvent(myevent, 14)">
-                                                <q-item-section>Tra 2 Settimane</q-item-section>
-                                            </q-item>
-                                            <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
-                                                <q-item-section>4 Eventi ogni Settimana</q-item-section>
-                                            </q-item>
-                                        </q-list>
-                                    </q-menu>
-                                </q-btn>
-                                <q-btn v-if="editable" flat round color="white" icon="delete"  v-close-popup
-                                       @click="deleteEvent(myevent)"></q-btn>
-                                <q-btn v-if="editable" flat round color="white" icon="edit"  v-close-popup
-                                       @click="editEvent(myevent)"></q-btn>
-                                <q-btn flat round color="white" icon="cancel" @click="selectEvent(null)"></q-btn>
-                            </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>
+                                <q-chip v-if="event === myevent && !displayEvent && editable"
+                                        class="text-center shadow-5 glossy bg-blue chipmodif">
 
-                        </div>
+                                    <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
+                                        <q-menu
+                                                transition-show="flip-right"
+                                                transition-hide="flip-left">
+                                            <q-list style="min-width: 100px">
+                                                <q-item clickable @click="duplicateEvent(myevent, 7)">
+                                                    <q-item-section>Tra 1 Settimana</q-item-section>
+                                                </q-item>
+                                                <q-item clickable @click="duplicateEvent(myevent, 14)">
+                                                    <q-item-section>Tra 2 Settimane</q-item-section>
+                                                </q-item>
+                                                <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
+                                                    <q-item-section>4 Eventi ogni Settimana</q-item-section>
+                                                </q-item>
+                                            </q-list>
+                                        </q-menu>
+                                    </q-btn>
+                                    <q-btn v-if="editable" flat round color="white" icon="delete" v-close-popup
+                                           @click="deleteEvent(myevent)"></q-btn>
+                                    <q-btn v-if="editable" flat round color="white" icon="edit" v-close-popup
+                                           @click="editEvent(myevent)"></q-btn>
+                                    <q-btn flat round color="white" icon="cancel" @click="selectEvent(null)"></q-btn>
+                                </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>
 
-                        <div class="listaev__date listaev__align_center_mobile">
-                            <span v-html="tools.getstrDateTimeEvent(mythis(), event, true)"></span>
-                        </div>
+                            </div>
 
-                        <div class="listaev__align_center_mobile">
+                            <div class="listaev__date listaev__align_center_mobile">
+                                <span v-html="tools.getstrDateTimeEvent(mythis(), event, true)"></span>
+                            </div>
 
-                            <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"
-                                       target="_blank"
-                                       ripple rounded :label="event.title" :icon="event.icon"
-                                       :color="event.bgcolor" text-color="white" glossy>
+                                <div style="margin: 10px;"></div>
 
-                                </q-btn>
-                                <!-- altrimenti mostra solo Chip -->
-                                <div v-else>
-                                    <q-btn size="md" type="a"
-                                           :to="`/event/` + event._id"
+                                <div class="">
+                                    <!-- Se c'è un link, allora -->
+                                    <q-btn v-if="event.linkpdf" size="md" type="a"
+                                           :href="`../../statics/` + event.linkpdf"
                                            target="_blank"
-                                           :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
-                                           ripple rounded
-                                           :label="event.title" :icon="event.icon"
+                                           ripple rounded :label="event.title" :icon="event.icon"
                                            :color="event.bgcolor" text-color="white" glossy>
 
                                     </q-btn>
-                                    <!--<div v-if="tools.isMobile()" class="cltexth3 text-center"-->
-                                         <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`">-->
+                                    <!-- altrimenti mostra solo Chip -->
+                                    <div v-else>
+                                        <q-btn size="md" type="a"
+                                               :to="`/event/` + event._id"
+                                               target="_blank"
+                                               :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
+                                               ripple rounded
+                                               :label="event.title" :icon="event.icon"
+                                               :color="event.bgcolor" text-color="white" glossy>
+
+                                        </q-btn>
+                                        <!--<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 text-center"-->
-                                            <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`"-->
-                                            <!--text-color="white"-->
-                                            <!--:icon="event.icon"-->
-                                            <!--dense>{{event.title}}-->
-                                    <!--</q-chip>-->
+                                        <!--</div>-->
+                                        <!--<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>-->
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div style="margin: 10px;"></div>
+                                <div style="margin: 10px;"></div>
 
-                            <p class="listaev__details" v-html="event.details"></p>
-                            <div v-if="event.teacher" class="">
+                                <p class="listaev__details" v-html="event.details"></p>
+                                <div v-if="event.teacher" class="">
                                     <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
                                             class="margin_with"></span></span>
 
-                                <q-chip>
-                                    <CMyAvatar :myimg="getImgTeacherByUsername(event.teacher)"></CMyAvatar>
-                                    <span class="cal__teacher-content">{{getTeacherByUsername(event.teacher)}}</span>
-                                </q-chip>
-                                <span v-if="getImgTeacherByUsername(event.teacher2) && isValidUsername(event.teacher2)"
-                                      class="margin_avatar2"></span>
-                                <q-chip v-if="getImgTeacherByUsername(event.teacher2) && isValidUsername(event.teacher2)">
-                                    <CMyAvatar :myimg="getImgTeacherByUsername(event.teacher2)"></CMyAvatar>
-                                    <span class="cal__teacher-content">{{getTeacherByUsername(event.teacher2)}}</span>
-                                </q-chip>
+                                    <q-chip>
+                                        <CMyAvatar :myimg="getImgTeacherByUsername(event.teacher)"></CMyAvatar>
+                                        <span class="cal__teacher-content">{{getTeacherByUsername(event.teacher)}}</span>
+                                    </q-chip>
+                                    <span v-if="getImgTeacherByUsername(event.teacher2) && isValidUsername(event.teacher2)"
+                                          class="margin_avatar2"></span>
+                                    <q-chip v-if="getImgTeacherByUsername(event.teacher2) && isValidUsername(event.teacher2)">
+                                        <CMyAvatar :myimg="getImgTeacherByUsername(event.teacher2)"></CMyAvatar>
+                                        <span class="cal__teacher-content">{{getTeacherByUsername(event.teacher2)}}</span>
+                                    </q-chip>
 
-                                <span v-if="event.wherecode" class="">
+                                    <span v-if="event.wherecode" class="">
                                         <span v-if="tools.isMobile()"><br/></span>
                                         <span class="cal__where-title">{{$t('cal.where')}}: </span>
 
@@ -640,24 +652,24 @@
                                             <span class="cal__teacher-content">{{getWhereName(event.wherecode)}}</span>
                                         </q-chip>
                                     </span>
-                            </div>
-                            <div v-if="event.contribtype" class="">
+                                </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="">
+                                    <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>
+                                    <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">
+                                <p class="text-center">
                                         <span v-if="event.linkpdf" class="">
                                             <q-btn size="md" type="a" :href="`../../statics/` + event.linkpdf"
                                                    target="_blank" rounded color="primary" icon="info"
@@ -665,36 +677,48 @@
 
                                             </q-btn>
                                         </span>
-                            </p>
-                            <div class="row justify-end">
-                                <q-btn rounded outline class="q-mx-sm"
-                                       color="primary" @click="askForInfoEventMenu(event)"
-                                       :label="$t('event.askinfo')">
-                                </q-btn>
-                                <q-btn rounded outline class="q-mx-sm"
-                                       v-if="!event.nobookable && !isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
-                                       color="primary" @click="addBookEventMenu(event)"
-                                       :label="$t('cal.booking')" :disable="!isEventEnabled(event)">
-                                </q-btn>
-                                <q-btn rounded outline class="q-mx-sm"
-                                       v-if="!event.nobookable && isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
-                                       text-color="red"
-                                       @click.native="EditBookEvent(event)"
-                                       :label="$t('cal.modifybooking')">
-                                </q-btn>
-                                <!--
-                                                                    <q-btn push rounded v-if="!event.nobookable && isAlreadyBooked(event)" color="positive" @click="BookEvent(event)"
-                                                                           :label="$t('cal.booked')">
-                                                                    </q-btn>
-                                -->
+                                </p>
+                                <div class="row justify-end">
+                                    <q-btn rounded outline class="q-mx-sm"
+                                           color="primary" @click="askForInfoEventMenu(event)"
+                                           :label="$t('event.askinfo')">
+                                    </q-btn>
+                                    <q-btn rounded outline class="q-mx-sm"
+                                           v-if="!event.nobookable && !isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
+                                           color="primary" @click="addBookEventMenu(event)"
+                                           :label="$t('cal.booking')" :disable="!isEventEnabled(event)">
+                                    </q-btn>
+                                    <q-btn rounded outline class="q-mx-sm"
+                                           v-if="!event.nobookable && isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
+                                           text-color="red"
+                                           @click.native="EditBookEvent(event)"
+                                           :label="$t('cal.modifybooking')">
+                                    </q-btn>
+                                    <!--
+                                                                        <q-btn push rounded v-if="!event.nobookable && isAlreadyBooked(event)" color="positive" @click="BookEvent(event)"
+                                                                               :label="$t('cal.booked')">
+                                                                        </q-btn>
+                                    -->
 
+                                </div>
                             </div>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </q-markup-table>
+                        </td>
+                    </tr>
+                    </tbody>
+                </q-markup-table>
+            </div>
+            <div v-else>
+                <CMySingleEvent :myevent="mysingleevent" calendarView="month" :iseditable="editable"
+                                @duplicateEvent="duplicateEvent"
+                                @askForInfoEventMenu="askForInfoEventMenu"
+                                @deleteEvent="deleteEvent"
+                                @editEvent="editEvent"
+                                @addBookEventMenu="addBookEventMenu"
+                                @EditBookEvent="EditBookEvent">
 
+                </CMySingleEvent>
+            </div>
+            <!--</q-intersection>-->
             <!-- Example of a Dialog with a Card -->
             <!--
                             <q-dialog v-model="card">
diff --git a/src/components/CMySingleEvent/CMySingleEvent.scss b/src/components/CMySingleEvent/CMySingleEvent.scss
new file mode 100644
index 0000000..50a72ae
--- /dev/null
+++ b/src/components/CMySingleEvent/CMySingleEvent.scss
@@ -0,0 +1,86 @@
+.listaev {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__date {
+    font-weight: bold;
+    color: #2ba0fd;
+    font-size: 1rem;
+  }
+
+  &__title {
+    color: red;
+    font-weight: 700;
+    letter-spacing: 0.066em;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__tdimg {
+    width: 150px;
+    height: 150px;
+  }
+
+  &__tdimg_small {
+    width: auto;
+    height: 50px !important;
+    @media (max-width: 800px) {
+      height: 40px !important;
+    }
+  }
+
+  &__table {
+    margin: 10px;
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+    padding: 2px;
+  }
+  &__table tr {
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+  }
+
+
+  &__align_center_mobile {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__align_chips {
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  &__img {
+    padding: 0.25rem !important;
+    float: left;
+    width: 150px;
+    height: 150px;
+    border-radius: 1rem;
+
+    @media (max-width: 718px) {
+      // PER VERSIONE MOBILE
+      float: none;
+      text-align: center;
+      margin: 0 auto;
+    }
+  }
+
+  &__img:hover {
+    transition: transform .2s;
+    transform: scale(1.05);
+    border: inset;
+    border-color: blue;
+    border-width: 1px;
+  }
+
+}
diff --git a/src/components/CMySingleEvent/CMySingleEvent.ts b/src/components/CMySingleEvent/CMySingleEvent.ts
new file mode 100644
index 0000000..309a88f
--- /dev/null
+++ b/src/components/CMySingleEvent/CMySingleEvent.ts
@@ -0,0 +1,85 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { CalendarStore, GlobalStore, UserStore } from '@store'
+
+import { Logo } from '../../components/logo/index'
+
+import { Footer } from '../../components/Footer/index'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { static_data } from '@src/db/static_data'
+import { Screen } from 'quasar'
+
+import { CImgText } from '../../components/CImgText/index'
+import { CCard, CMyAvatar, CMyPage } from '@components'
+import MixinOperator from '@src/mixins/mixin-operator'
+import MixinEvents from '../../mixins/mixin-events'
+import { IEvents } from '@src/model'
+import MixinBase from '@src/mixins/mixin-base'
+import MixinUsers from '@src/mixins/mixin-users'
+
+@Component({
+  name: 'CMySingleEvent',
+  mixins: [MixinOperator, MixinBase, MixinEvents, MixinUsers],
+  components: { Logo, Footer, CImgText, CCard, CMyPage, CMyAvatar }
+})
+export default class CMySingleEvent extends MixinEvents {
+  public $q
+  public $t
+  public myevent: IEvents = null
+  public selected: boolean = false
+
+  @Watch('$route.params.eventid')
+  public changeevent() {
+    // this.mytypetransgroup = ''
+    this.myevent = CalendarStore.state.eventlist.find((rec) => rec._id === this.$route.params.eventid)
+    // console.log('myevent', this.myevent, 'eventid=', this.$route.params.eventid)
+  }
+
+  public selectEvent(eventparam: IEvents) {
+    this.selected = !this.selected
+  }
+
+  public getTextEvent(myevent: IEvents) {
+    if (myevent.bodytext === '') {
+      return myevent.details
+    } else {
+      return myevent.bodytext
+    }
+  }
+
+  public mounted() {
+    this.changeevent()
+    console.log('myevent', this.myevent)
+  }
+
+  get static_data() {
+    return static_data
+  }
+
+  public duplicateEvent(event, numgg) {
+    this.$emit('duplicateEvent', event, numgg)
+  }
+
+  public askForInfoEventMenu(event) {
+    this.$emit('askForInfoEventMenu', event)
+  }
+
+  public deleteEvent(event) {
+    this.$emit('deleteEvent', event)
+  }
+
+  public editEvent(event) {
+    this.$emit('editEvent', event)
+  }
+
+  public addBookEventMenu(event) {
+    this.$emit('addBookEventMenu', event)
+  }
+
+  public EditBookEvent(event) {
+    this.$emit('EditBookEvent', event)
+  }
+
+}
diff --git a/src/components/CMySingleEvent/CMySingleEvent.vue b/src/components/CMySingleEvent/CMySingleEvent.vue
new file mode 100644
index 0000000..038d84e
--- /dev/null
+++ b/src/components/CMySingleEvent/CMySingleEvent.vue
@@ -0,0 +1,172 @@
+<template>
+    <div>
+        <CMyPage v-if="myevent" :imgbackground="myevent.img" :title="myevent.title" keywords="" description="">
+
+            <div class="q-ma-md">
+                <div class="listaev__align_chips q-ma-md">
+                    <img :src="getImgEvent(myevent)"
+                         @click="selectEvent(myevent)"
+                         class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer"
+                         :style="getStyleByEvent(myevent, true)">
+                    <q-chip dense v-if="isAlreadyBooked(myevent)" class="cltexth4 chipbooked shadow-5 q-mb-md"
+                            color="green" text-color="white"
+                            icon="event_available">{{$t('cal.booked')}}
+                    </q-chip>
+                    <q-chip v-if="selected" class="text-center shadow-5 glossy bg-blue chipmodif">
+
+                        <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
+                            <q-menu
+                                    transition-show="flip-right"
+                                    transition-hide="flip-left">
+                                <q-list style="min-width: 100px">
+                                    <q-item clickable @click="duplicateEvent(myevent, 7)">
+                                        <q-item-section>Tra 1 Settimana</q-item-section>
+                                    </q-item>
+                                    <q-item clickable @click="duplicateEvent(myevent, 14)">
+                                        <q-item-section>Tra 2 Settimane</q-item-section>
+                                    </q-item>
+                                    <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
+                                        <q-item-section>4 Eventi ogni Settimana</q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-menu>
+                        </q-btn>
+                        <q-btn v-if="editable" flat round color="white" icon="delete" v-close-popup
+                               @click="deleteEvent(myevent)"></q-btn>
+                        <q-btn v-if="editable" flat round color="white" icon="edit" v-close-popup
+                               @click="editEvent(myevent)"></q-btn>
+                        <q-btn flat round color="white" icon="cancel" @click="selectEvent(null)"></q-btn>
+                    </q-chip>
+                    <q-chip v-if="myevent.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>
+
+                </div>
+
+                <div class="listaev__date listaev__align_center_mobile">
+                    <span v-html="tools.getstrDateTimeEvent(mythis(), myevent, true)"></span>
+                </div>
+
+                <div class="listaev__align_center_mobile">
+
+                    <div style="margin: 10px;"></div>
+
+                    <div class="">
+                        <!-- Se c'è un link, allora -->
+                        <q-btn v-if="myevent.linkpdf" size="md" type="a"
+                               :href="`../../statics/` + myevent.linkpdf"
+                               target="_blank"
+                               ripple rounded :label="myevent.title" :icon="myevent.icon"
+                               :color="myevent.bgcolor" text-color="white" glossy>
+
+                        </q-btn>
+                        <!-- altrimenti mostra solo Chip -->
+                        <div v-else>
+                            <div v-if="tools.isMobile()" class="cltexth3 text-center"
+                                 :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`">
+                                {{myevent.title}}
+                            </div>
+                            <q-chip v-else class="cltexth3 text-center"
+                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                                    text-color="white"
+                                    :icon="myevent.icon"
+                                    dense>{{myevent.title}}
+                            </q-chip>
+                        </div>
+                    </div>
+
+                    <div style="margin: 10px;"></div>
+
+                    <p v-if="myevent.bodytext" class="listaev__details text-left" v-html="myevent.bodytext"></p>
+                    <p v-else class="listaev__details" v-html="myevent.details"></p>
+
+                    <div v-if="myevent.teacher" class="">
+                                    <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
+                                            class="margin_with"></span></span>
+
+                        <q-chip>
+                            <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher)"></CMyAvatar>
+                            <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher)}}</span>
+                        </q-chip>
+                        <span v-if="getImgTeacherByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)"
+                              class="margin_avatar2"></span>
+                        <q-chip v-if="getImgTeacherByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)">
+                            <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher2)"></CMyAvatar>
+                            <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher2)}}</span>
+                        </q-chip>
+
+                        <span v-if="myevent.wherecode" class="">
+                                        <span v-if="tools.isMobile()"><br/></span>
+                                        <span class="cal__where-title">{{$t('cal.where')}}: </span>
+
+                                        <q-chip>
+                                            <q-avatar v-if="getWhereIcon(myevent.wherecode)">
+                                                <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
+                                            </q-avatar>
+                                            <q-avatar v-else color="blue" font-size="20px" text-color="white"
+                                                      icon="home">
+                                            </q-avatar>
+                                            <span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
+                                        </q-chip>
+                                    </span>
+                    </div>
+                    <div v-if="myevent.contribtype" class="">
+                                <span class="cal__quota-title">{{$t('event.price')}}:<span
+                                        class="margin_with"></span></span>
+                        <span v-if="!isShowPrice(myevent)" class="">
+                                    <q-chip class="glossy" color="orange" text-color="white">
+                                        <span class="cal__quota-content">{{getContribtypeById(myevent.contribtype)}}</span>
+                                    </q-chip>
+                                </span>
+
+                        <q-chip v-if="myevent.price && isShowPrice(myevent)" class="glossy" color="orange"
+                                text-color="white" icon-right="star">
+                            <span class="cal__quota-content">{{getPrice(myevent)}}</span>
+                        </q-chip>
+                    </div>
+
+
+                    <p class="text-center">
+                                        <span v-if="myevent.linkpdf" class="">
+                                            <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
+                                                   target="_blank" rounded color="primary" icon="info"
+                                                   :label="$t('cal.showinfo')">
+
+                                            </q-btn>
+                                        </span>
+                    </p>
+                    <div class="row justify-end">
+                        <q-btn rounded outline class="q-mx-sm"
+                               color="primary" @click="askForInfoEventMenu(myevent)"
+                               :label="$t('event.askinfo')">
+                        </q-btn>
+                        <q-btn rounded outline class="q-mx-sm"
+                               v-if="!myevent.nobookable && !isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
+                               color="primary" @click="addBookEventMenu(myevent)"
+                               :label="$t('cal.booking')" :disable="!isEventEnabled(myevent)">
+                        </q-btn>
+                        <q-btn rounded outline class="q-mx-sm"
+                               v-if="!myevent.nobookable && isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
+                               text-color="red"
+                               @click="EditBookEvent(myevent)"
+                               :label="$t('cal.modifybooking')">
+                        </q-btn>
+                        <!--
+                                                            <q-btn push rounded v-if="!myevent.nobookable && isAlreadyBooked(myevent)" color="positive" @click="BookEvent(myevent)"
+                                                                   :label="$t('cal.booked')">
+                                                            </q-btn>
+                        -->
+
+                    </div>
+                </div>
+            </div>
+        </CMyPage>
+    </div>
+</template>
+<script lang="ts" src="./CMySingleEvent.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CMySingleEvent.scss';
+</style>
diff --git a/src/components/CMySingleEvent/index.ts b/src/components/CMySingleEvent/index.ts
new file mode 100644
index 0000000..002c163
--- /dev/null
+++ b/src/components/CMySingleEvent/index.ts
@@ -0,0 +1 @@
+export {default as CMySingleEvent} from './CMySingleEvent.vue'
diff --git a/src/components/index.ts b/src/components/index.ts
index e091501..67b5583 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -18,6 +18,7 @@ export * from './CPreloadImages'
 export * from './CSignIn'
 export * from './CSignUp'
 export * from './CEventsCalendar'
+export * from './CMySingleEvent'
 export * from './CDate'
 export * from './CDateTime'
 export * from './BannerCookies'
diff --git a/src/store/Modules/UserStore.ts b/src/store/Modules/UserStore.ts
index 6280707..5eda16a 100644
--- a/src/store/Modules/UserStore.ts
+++ b/src/store/Modules/UserStore.ts
@@ -658,6 +658,7 @@ namespace Actions {
       await Projects.actions.dbLoad({ checkPending: true, onlyiffirsttime: true })
 
     GlobalStore.state.finishLoading = true
+    console.log('finishLoading', GlobalStore.state.finishLoading)
 
     return true
     // console.log('setGlobal: END')