diff --git a/src/components/CEventsCalendar/CEventsCalendar.scss b/src/components/CEventsCalendar/CEventsCalendar.scss
new file mode 100644
index 0000000..796f497
--- /dev/null
+++ b/src/components/CEventsCalendar/CEventsCalendar.scss
@@ -0,0 +1,209 @@
+$graytext: #555;
+
+.calendar {
+  position: relative;
+}
+
+.my-event {
+  width: 100%;
+  position: absolute;
+  font-size: 12px;
+}
+
+.flex-container {
+  background-color: #ccc;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.flex-item {
+  background-color: #9f9f9f;
+  padding: 10px;
+  margin: 10px;
+  color: #fff;
+  font-size: 1rem;
+}
+
+.cal {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__title {
+    color: red;
+    font-weight: 700;
+    font-size: 1rem;
+    padding-bottom: 10px;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__hours {
+    color: blue;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      font-weight: 400;
+    }
+  }
+
+  &__where {
+    margin-top: 10px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__when {
+    margin-top: 10px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__teacher {
+    margin-top: 10px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__img {
+    width: 100px;
+    height: 100px;
+    padding: 10px;
+  }
+
+}
+
+.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;
+  }
+
+  &__table {
+    margin: 10px;
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+  }
+
+  &__align_center_mobile {
+    text-align: left;
+    @media (max-width: 718px) {
+      text-align: center;
+      display: flex;
+    }
+  }
+
+  &__img {
+    padding: 0.5rem !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;
+    }
+  }
+
+}
+
+@media (max-width: 718px) {
+  .q-chip__content {
+    white-space: normal !important;
+  }
+
+  .q-chip > div {
+    white-space: normal !important;
+  }
+  .inline > div {
+    white-space: normal !important;
+  }
+}
+
+.mytoolbar {
+  padding: 0 2px !important;
+}
+
+.margin_avatar, .margin_avatar2, .margin_with {
+  margin-left: 0;
+}
+
+@media (max-width: 400px) {
+  .margin_avatar {
+    margin-left: 28px;
+  }
+
+  .margin_avatar2 {
+    margin-left: 38px;
+  }
+
+  .margin_with {
+    margin-left: 7px;
+  }
+}
+
+.chipbooked {
+
+  position: absolute;
+  left: 40px;
+  @media (max-width: 400px) {
+    position: initial;
+  }
+}
+
+.windowcol {
+  background-color: #ffffff;
+          // background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
+}
+
+.mysel{
+  color: white;
+}
diff --git a/src/components/CEventsCalendar/CEventsCalendar.ts b/src/components/CEventsCalendar/CEventsCalendar.ts
new file mode 100644
index 0000000..4c7287e
--- /dev/null
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -0,0 +1,868 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { CalendarStore, UserStore } from '@store'
+
+import { Logo } from '../../components/logo/index'
+
+import { Footer } from '../../components/Footer/index'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext, func_tools } from '@src/store/Modules/toolsext'
+import { db_data } from '@src/db/db_data'
+import { colors, Screen, Platform, date } from 'quasar'
+
+import { CTitle } from '../../components/CTitle/index'
+import { CImgText } from '../../components/CImgText/index'
+import { stop, prevent, stopAndPrevent } from 'quasar/src/utils/event'
+
+import QDateScroller from '@quasar/quasar-app-extension-qscroller/src/component/QDateScroller'
+import QDateTimeScroller from '@quasar/quasar-app-extension-qscroller/src/component/QDateTimeScroller'
+import { CTodo } from '@src/components/todos/CTodo'
+import { SingleProject } from '@src/components/projects/SingleProject'
+import { IEvents } from '@src/model'
+import { BookingStore } from '@store'
+import { IBookedEvent, IBookedEventPage, EState } from '@src/model/Calendar'
+import { costanti } from '@src/store/Modules/costanti'
+import router from '@router'
+import { static_data } from '@src/db/static_data'
+import translate from '@src/globalroutines/util'
+
+@Component({
+  name: 'CEventsCalendar',
+  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller }
+})
+export default class CEventsCalendar extends Vue {
+  public $t: any
+  public $q
+  public calendarView = 'month'
+  public selectedDate = '2019-04-01'
+  public formDefault = {
+    title: '',
+    details: '',
+    allDay: false,
+    dateTimeStart: '',
+    dateTimeEnd: '',
+    icon: '',
+    bgcolor: '#0000FF'
+  }
+
+  public formbookEventDefault: IBookedEvent = {
+    msgbooking: '',
+    infoevent: '',
+    numpeople: 1,
+    datebooked: tools.getDateNow(),
+    booked: false,
+    modified: false
+  }
+
+  public mioalert = false
+
+  public dateFormatter: any = ''
+  public titleFormatter: any = null
+
+  public keyValue = 0
+  public direction = 'forward'
+  public weekdays = [1, 2, 3, 4, 5, 6, 0]
+  public viewOptions = [
+    { label: 'Day', value: 'day' },
+    { label: '5 Day', value: '5day' },
+    { label: 'Week', value: 'week' },
+    { label: 'Month', value: 'month' }
+  ]
+  public addEvent = false
+  public bookEventpage: IBookedEventPage = {
+    show: false,
+    bookedevent: null,
+    state: EState.None
+  }
+
+  public contextDay = null
+  public eventForm = { ...this.formDefault }
+  public bookEventForm = { ...this.formbookEventDefault }
+  public displayEvent = false
+  public myevent = null
+  // public events = []
+  public gmt = ''
+  public dragging = false
+  public draggedEvent = null
+  public ignoreNextSwipe = false
+  public showDateScrollerAllDay = false
+  public showDateTimeScrollerStart = false
+  public showDateTimeScrollerEnd = false
+
+  @Watch('locale')
+  public checkloc() {
+    this.updateFormatters()
+  }
+
+  public resources = [
+    {
+      label: 'John'
+    },
+    {
+      label: 'Mary'
+    },
+    {
+      label: 'Susan'
+    },
+    {
+      label: 'Olivia'
+    },
+    {
+      label: 'Board Room'
+    },
+    {
+      label: 'Room-1'
+    },
+    {
+      label: 'Room-2'
+    }
+  ]
+
+  public $refs: {
+    calendar: any
+  }
+
+  // public eventdata =
+  //   [
+  //     {
+  //       id: 1,
+  //       summary: 'Test myevent',
+  //       description: 'Some extra info goes here',
+  //       location: 'Office of the Divine Randomness, 1232 Main St., Denver, CO',
+  //       start: {
+  //         dateTime: '2019-07-09T14:00:00', // ISO 8601 formatted
+  //         timeZone: 'America/New_York' // Timezone listed as a separate IANA code
+  //       },
+  //       end: {
+  //         dateTime: '2019-07-11T16:30:00',
+  //         timeZone: 'American/New_York'
+  //       },
+  //       color: 'positive',
+  //       attendees: [
+  //         {
+  //           id: 5,
+  //           email: 'somebody@somewhere.com',
+  //           displayName: 'John Q. Public',
+  //           organizer: false,
+  //           self: false,
+  //           resource: false
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       id: 2,
+  //       summary: 'Test all-day myevent',
+  //       description: 'Some extra info goes here',
+  //       start: {
+  //         date: '2018-02-16' // A date variable indicates an all-day myevent
+  //       },
+  //       end: {
+  //         date: '2018-02-19'
+  //       }
+  //     },
+  //     {
+  //       id: 3,
+  //       summary: 'Some other test myevent',
+  //       description: 'Some extra info goes here',
+  //       start: {
+  //         dateTime: '2018-02-17T10:00:00+0500', // timezone embedded in dateTime
+  //       },
+  //       end: {
+  //         dateTime: '2018-02-17T12:30:00+0500',
+  //       }
+  //     }
+  //   ]
+
+  get title_cal() {
+    if (this.titleFormatter && this.locale) {
+      const mydate = new Date(this.selectedDate)
+      return this.titleFormatter.format(mydate)
+    }
+    return ''
+  }
+
+  get intervalRangeStep() {
+    return CalendarStore.state.intervalRangeStep
+  }
+
+  get resourceWidth() {
+    return CalendarStore.state.resourceWidth
+  }
+
+  get intervalHeight() {
+    return CalendarStore.state.intervalHeight
+  }
+
+  get shortIntervalLabel() {
+    return CalendarStore.state.shortIntervalLabel
+  }
+
+  get shortWeekdayLabel() {
+    return CalendarStore.state.shortWeekdayLabel
+  }
+
+  get hideHeader() {
+    return CalendarStore.state.hideHeader
+  }
+
+  get showDayOfYearLabel() {
+    return CalendarStore.state.showDayOfYearLabel
+  }
+
+  get shortMonthLabel() {
+    return CalendarStore.state.shortMonthLabel
+  }
+
+  get enableThemes() {
+    return CalendarStore.state.enableThemes
+  }
+
+  get resourceHeight() {
+    return CalendarStore.state.resourceHeight
+  }
+
+  get noScroll() {
+    return CalendarStore.state.noScroll
+  }
+
+  get maxDays() {
+    return CalendarStore.state.maxDays
+  }
+
+  get hour24Format() {
+    return CalendarStore.state.hour24Format
+  }
+
+  get showWorkWeeks() {
+    return CalendarStore.state.showWorkWeeks
+  }
+
+  get dayHeight() {
+    return CalendarStore.state.dayHeight
+  }
+
+  get theme() {
+    return CalendarStore.state.theme
+  }
+
+  get locale() {
+    return CalendarStore.state.locale
+  }
+
+  get showMonthLabel() {
+    return CalendarStore.state.showMonthLabel
+  }
+
+  get intervalStart() {
+    return CalendarStore.state.intervalRange.min * (1 / CalendarStore.state.intervalRangeStep)
+  }
+
+  get intervalCount() {
+    return (CalendarStore.state.intervalRange.max - CalendarStore.state.intervalRange.min) * (1 / CalendarStore.state.intervalRangeStep)
+  }
+
+  get editable() {
+    return CalendarStore.state.editable
+  }
+
+  public mounted() {
+    this.selectedDate = this.formatDate(tools.getDateNow())
+    this.$root.$on('calendar:next', this.calendarNext)
+    this.$root.$on('calendar:prev', this.calendarPrev)
+    this.$root.$on('calendar:today', this.calendarToday)
+    // CalendarStore.state.eventlist = events
+    this.updateFormatters()
+  }
+
+  public beforeMount() {
+    CalendarStore.state.locale = toolsext.getLocale()
+    this.updateFormatters()
+  }
+
+  public beforeDestroy() {
+    this.$root.$off('calendar:next', this.calendarNext)
+    this.$root.$off('calendar:prev', this.calendarPrev)
+    this.$root.$off('calendar:today', this.calendarToday)
+  }
+
+  get containerStyle() {
+    const styles = { height: '' }
+    if (this.calendarView !== 'month' || (this.calendarView === 'month' && CalendarStore.state.dayHeight === 0)) {
+      styles.height = `calc(100vh - ${CalendarStore.state.titlebarHeight}px)`
+    }
+    return styles
+  }
+
+  // convert the events into a map of lists keyed by date
+  get eventsMap() {
+    // console.log('eventsMap')
+    const map = {}
+    CalendarStore.state.eventlist.forEach((myevent) => (map[myevent.date] = map[myevent.date] || []).push(myevent))
+    return map
+  }
+
+  get addOrUpdateEvent() {
+    if (this.contextDay && this.contextDay.bgcolor) {
+      return 'Update'
+    }
+    return 'Add'
+  }
+
+  get scrollerPopupStyle160() {
+    if (this.$q.screen.lt.sm) {
+      return {
+        width: '100vw',
+        height: '100vh'
+      }
+    } else {
+      return {
+        maxHeight: '400px',
+        height: '400px',
+        width: '160px'
+      }
+    }
+  }
+
+  get scrollerPopupStyle280() {
+    if (this.$q.screen.lt.sm) {
+      return {
+        width: '100vw',
+        height: '100vh'
+      }
+    } else {
+      return {
+        maxHeight: '400px',
+        height: '400px',
+        width: '280px'
+      }
+    }
+  }
+
+  public isCssColor(color) {
+    return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/)
+  }
+
+  public showEvent(eventparam: IEvents) {
+    // console.log('showEvent - INIZIO')
+    this.myevent = eventparam
+    this.displayEvent = true
+    // console.log('showEvent - FINE ' + myevent)
+  }
+
+  public getEndTime(eventparam) {
+    let endTime = new Date(eventparam.date + ' ' + eventparam.time + ':00')
+    endTime = date.addToDate(endTime, { minutes: eventparam.duration })
+    endTime = date.formatDate(endTime, 'HH:mm')
+    return endTime
+  }
+
+  public displayClasses(eventparam) {
+    return {
+      [`bg-${eventparam.bgcolor}`]: !this.isCssColor(eventparam.bgcolor),
+      'text-white': !this.isCssColor(eventparam.bgcolor)
+    }
+  }
+
+  public displayStyles(eventparam) {
+    const s = { color: '' }
+    if (this.isCssColor(eventparam.bgcolor)) {
+      s['background-color'] = eventparam.bgcolor
+      s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
+    }
+    return s
+  }
+
+  public onDateChanged(mydate) {
+    this.calendarView = 'day'
+  }
+
+  public resourceClicked(resource) {
+    console.log('resource clicked:', resource)
+  }
+
+  public resourceDayClicked(resource) {
+    console.log('resource:day clicked:', resource)
+  }
+
+  public resetForm() {
+    this.eventForm = { ...this.formDefault }
+  }
+
+  public addEventMenu(day, type) {
+    // console.log('addeventmenu editable = ', this.editable)
+    if (this.calendarView === 'scheduler' || this.calendarView === 'week-scheduler' || this.calendarView === 'month-scheduler' || !this.editable) {
+      return
+    }
+    this.resetForm()
+    this.contextDay = { ...day }
+    let timestamp
+    if (this.contextDay.hasTime === true) {
+      timestamp = this.getTimestamp(this.adjustTimestamp(this.contextDay))
+      const startTime = new Date(timestamp)
+      const endTime = date.addToDate(startTime, { hours: 1 })
+      this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
+    } else {
+      timestamp = this.contextDay.date + ' 00:00'
+    }
+    this.eventForm.dateTimeStart = timestamp
+    this.eventForm.allDay = this.contextDay.hasTime === false
+    this.eventForm.bgcolor = '#0000FF' // starting color
+    this.addEvent = true // show dialog
+  }
+
+  public addBookEventMenu(eventparam) {
+    if (!UserStore.state.isLogged) {
+      this.$router.push('/signin')
+    } else {
+      console.log('addBookEventMenu')
+      this.resetForm()
+      this.myevent = eventparam
+      this.bookEventForm.msgbooking = translate('cal.bookingtextdefault') + ' ' + tools.gettextevent(this.myevent)
+      this.bookEventForm.numpeople = 1
+      this.bookEventpage.state = EState.Creating
+
+      this.displayEvent = false
+      this.bookEventpage.show = true // show dialog
+    }
+  }
+
+  public clEvent(event: IEvents) {
+    return (this.isAlreadyBooked(event) ? 'text-left bg-light-green-1' : 'text-left')
+  }
+
+  public editEvent(eventparam) {
+    console.log('editEvent - INIZIO')
+    this.resetForm()
+    this.contextDay = { ...eventparam }
+    let timestamp
+    if (eventparam.time) {
+      timestamp = eventparam.date + ' ' + eventparam.time
+      const startTime = new Date(timestamp)
+      const endTime = date.addToDate(startTime, { minutes: eventparam.duration })
+      this.eventForm.dateTimeStart = this.formatDate(startTime) + ' ' + this.formatTime(startTime) // endTime.toString()
+      this.eventForm.dateTimeEnd = this.formatDate(endTime) + ' ' + this.formatTime(endTime) // endTime.toString()
+    } else {
+      timestamp = eventparam.date
+      this.eventForm.dateTimeStart = timestamp
+    }
+    this.eventForm.allDay = !eventparam.time
+    this.eventForm.bgcolor = eventparam.bgcolor
+    this.eventForm.icon = eventparam.icon
+    this.eventForm.title = eventparam.title
+    this.eventForm.details = eventparam.details
+    this.addEvent = true // show dialog
+  }
+
+  public deleteEvent(eventparam) {
+    const index = this.findEventIndex(eventparam)
+    if (index >= 0) {
+      CalendarStore.state.eventlist.splice(index, 1)
+    }
+  }
+
+  public findEventIndex(eventparam) {
+    for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
+      if (eventparam.title === CalendarStore.state.eventlist[i].title &&
+        eventparam.details === CalendarStore.state.eventlist[i].details &&
+        eventparam.date === CalendarStore.state.eventlist[i].date) {
+        return i
+      }
+    }
+  }
+
+  public formatDate(mydate: any) {
+    let d = void 0
+
+    if (mydate !== void 0) {
+      d = new Date(mydate)
+    } else {
+      d = new Date()
+    }
+    const month = '' + (d.getMonth() + 1)
+    const day = '' + d.getDate()
+    const year = d.getFullYear()
+
+    return [year, tools.padTime(month), tools.padTime(day)].join('-')
+  }
+
+  get tools() {
+    return tools
+  }
+
+  get toolsext() {
+    return toolsext
+  }
+
+  get func_tools() {
+    return func_tools
+  }
+
+  public formatTime(mydate) {
+    const d = mydate !== void 0 ? new Date(mydate) : new Date(),
+      hours = '' + d.getHours(),
+      minutes = '' + d.getMinutes()
+
+    return [tools.padTime(hours), tools.padTime(minutes)].join(':')
+  }
+
+  public getDuration(dateTimeStart, dateTimeEnd, unit) {
+    const start = new Date(dateTimeStart)
+    const end = new Date(dateTimeEnd)
+    const diff = date.getDateDiff(end, start, unit)
+    return diff
+  }
+
+  public saveEvent() {
+    const self = this
+
+    // ++Todo VALIDATE this.$refs.myevent
+
+    if (true) {
+      // close the dialog
+      self.addEvent = false
+      const form = { ...self.eventForm }
+      let update = false
+      if (self.contextDay.bgcolor) {
+        // an update
+        update = true
+      } else {
+        // an add
+      }
+      const data: IEvents = {
+        time: '',
+        duration: 0,
+        duration2: 0,
+        title: form.title,
+        details: form.details,
+        icon: form.icon,
+        bgcolor: form.bgcolor,
+        date: String(form.dateTimeStart).slice(0, 10).replace(/\//g, '-')
+      }
+      if (form.allDay === false) {
+        // get time into separate var
+        data.time = String(form.dateTimeStart).slice(11, 16)
+        data.duration = self.getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
+      }
+      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)
+      }
+
+      self.contextDay = null
+    }
+  }
+
+  public EditBookEvent(myevent: IEvents) {
+    this.myevent = myevent
+    const bookedevent = CalendarStore.getters.findEventBooked(myevent, false)
+
+    console.log('bookedevent', bookedevent)
+
+    if (bookedevent) {
+      this.bookEventForm.numpeople = bookedevent.numpeople
+      this.bookEventForm.infoevent = bookedevent.infoevent
+      this.bookEventForm.msgbooking = bookedevent.msgbooking
+      this.bookEventForm.booked = bookedevent.booked
+      this.bookEventForm.datebooked = bookedevent.datebooked
+    }
+
+    this.bookEventpage.state = EState.Modifying
+    this.bookEventpage.bookedevent = bookedevent
+    this.bookEventpage.show = true
+  }
+
+  get hasModifiedBooking() {
+    return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
+      (this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking)
+  }
+
+  public saveBookEvent(myevent: IEvents) {
+    const self = this
+
+    // ++Todo VALIDATE this.$refs.myevent
+
+    if (true) {
+      // close the dialog
+      self.bookEventpage.show = false
+
+      self.bookEventForm.booked = true
+
+      const data: IBookedEvent = {
+        id_bookedevent: myevent._id,
+        numpeople: self.bookEventForm.numpeople,
+        infoevent: tools.gettextevent(myevent),
+        msgbooking: self.bookEventForm.msgbooking,
+        booked: self.bookEventForm.booked,
+        datebooked: tools.getDateNow(),
+        modified: (self.bookEventpage.state !== EState.Creating)
+      }
+
+      this.BookEvent(data).then((ris) => {
+        if (ris)
+          tools.showPositiveNotif(self.$q, self.$t('cal.booked') + ' ' + self.$t('cal.event') + ' "' + myevent.title + '"')
+        else
+          tools.showNegativeNotif(self.$q, self.$t('cal.booked_error'))
+      })
+
+      self.contextDay = null
+    }
+  }
+
+  public showOffset(days) {
+    if (days.length === 0) return
+
+    let val = ''
+    val = tools.padTime(new Date(this.getTimestamp(days[0])).getTimezoneOffset() / 60)
+    if (Number.isNaN(Number(val))) return ''
+    return 'GMT-' + val
+  }
+
+  public adjustTimestamp(day) {
+    day.minute = day.minute < 15 || day.minute >= 45 ? 0 : 30
+    return day
+  }
+
+  public getTimestamp(day) {
+    return day.date + ' ' + tools.padTime(day.hour) + ':' + tools.padTime(day.minute) + ':00.000'
+  }
+
+  public updateFormatters() {
+    try {
+      // console.log('tools.getLocale() =', tools.getLocale())
+      // console.log('Calendar', CalendarStore.state.locale)
+      this.dateFormatter = new Intl.DateTimeFormat(tools.getLocale() || void 0, {
+        weekday: CalendarStore.state.shortWeekdayLabel ? 'short' : 'long',
+        month: CalendarStore.state.shortMonthLabel ? 'short' : 'long',
+        day: 'numeric',
+        year: 'numeric',
+        timeZone: 'UTC'
+      })
+      this.titleFormatter = new Intl.DateTimeFormat(this.locale || void 0, {
+        month: this.shortMonthLabel ? 'short' : 'long',
+        year: 'numeric',
+        timeZone: 'UTC'
+      })
+
+    } catch (e) {
+      console.error('Intl.DateTimeFormat not supported')
+      this.dateFormatter = void 0
+    }
+  }
+
+  public handleSwipe({ evt, ...info }) {
+    if (this.dragging === false) {
+      if (info.duration >= 30 && this.ignoreNextSwipe === false) {
+        if (info.direction === 'right') {
+          this.calendarPrev()
+        } else if (info.direction === 'left') {
+          this.calendarNext()
+        }
+      } else {
+        this.ignoreNextSwipe = false
+      }
+    }
+    stopAndPrevent(evt)
+  }
+
+  public onDragEnter(ev, eventparam) {
+    prevent(ev)
+  }
+
+  public onDragStart(ev, eventparam) {
+    this.dragging = true
+    this.draggedEvent = eventparam
+    stop(ev)
+  }
+
+  public onDragEnd(ev, eventparam) {
+    stopAndPrevent(ev)
+    this.resetDrag()
+  }
+
+  public onDragOver(ev, day, type) {
+    if (type === 'day') {
+      stopAndPrevent(ev)
+      return this.draggedEvent.date !== day.date
+    } else if (type === 'interval') {
+      stopAndPrevent(ev)
+      return this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
+    }
+  }
+
+  public onDrop(ev, day, type) {
+    ev.preventDefault()
+    ev.stopPropagation()
+    if (type === 'day') {
+      this.draggedEvent.date = day.date
+      this.draggedEvent.side = void 0
+    } else if (type === 'interval') {
+      this.draggedEvent.date = day.date
+      this.draggedEvent.time = day.time
+      this.draggedEvent.side = void 0
+    }
+  }
+
+  public resetDrag() {
+    this.draggedEvent = void 0
+    this.dragging = false
+    if (Platform.is.desktop) {
+      this.ignoreNextSwipe = true
+    }
+  }
+
+  public async BookEvent(eventparam: IBookedEvent) {
+    return await CalendarStore.actions.BookEvent(eventparam)
+  }
+
+  public async CancelBookingEvent(eventparam: IEvents) {
+    console.log('CancelBookingEvent ', eventparam._id)
+    tools.askConfirm(this.$q, translate('cal.titlebooking'), translate('cal.cancelbooking') + ' ' + tools.gettextevent(eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), this, costanti.FuncDialog.CANCEL_BOOKING, 0, { param1: eventparam })
+  }
+
+  public isAlreadyBooked(eventparam: IEvents) {
+    return CalendarStore.getters.findEventBooked(eventparam, true)
+  }
+
+  public getEventDate(eventparam) {
+    const parts = eventparam.date.split('-')
+    const mydate = new Date(parts[0], parts[1] - 1, parts[2])
+    return this.dateFormatter.format(mydate)
+  }
+
+  public badgeClasses(eventparam, type) {
+    const cssColor = this.isCssColor(eventparam.bgcolor)
+    const isHeader = type === 'header'
+    return {
+      [`text-white bg-${eventparam.bgcolor}`]: !cssColor,
+      'full-width': !isHeader && (!eventparam.side || eventparam.side === 'full'),
+      'left-side': !isHeader && eventparam.side === 'left',
+      'right-side': !isHeader && eventparam.side === 'right'
+    }
+  }
+
+  public badgeStyles(eventparam, type, timeStartPos, timeDurationHeight) {
+    const s = { color: '', top: '', height: '' }
+
+    if (this.isCssColor(eventparam.bgcolor)) {
+      s['background-color'] = eventparam.bgcolor
+      s.color = colors.luminosity(eventparam.bgcolor) > 0.5 ? 'black' : 'white'
+    }
+    if (timeStartPos) {
+      s.top = timeStartPos(eventparam.time) + 'px'
+    }
+    if (timeDurationHeight) {
+      s.height = timeDurationHeight(eventparam.duration) + 'px'
+    }
+    s['align-items'] = 'flex-start'
+    return s
+  }
+
+  public calendarNext() {
+    this.$refs.calendar.next()
+  }
+
+  public calendarPrev() {
+    this.$refs.calendar.prev()
+  }
+
+  public calendarToday(today) {
+    this.selectedDate = today
+  }
+
+  public SetToday() {
+    this.$root.$emit('calendar:today', this.formatDate(tools.getDateNow()))
+  }
+
+  public onChanged(data) {
+    // uncomment to see data in console
+    // let { start, end } = data
+    // console.log('onChanged:', start, end)
+  }
+
+  public onMoved(moved) {
+    // uncomment to see data in console
+    // console.log('onMoved:', moved)
+  }
+
+  public getEventList() {
+    const eventsloc = []
+
+    const datenow = tools.addDays(tools.getDateNow(), -1)
+
+    for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
+      // console.log('  ciclo i = ', i, CalendarStore.state.eventlist[i])
+      const dateEvent = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
+
+      if (dateEvent >= datenow) {
+        eventsloc.push(CalendarStore.state.eventlist[i])
+      }
+    }
+
+    return eventsloc
+  }
+
+  public getEvents(dt) {
+    const eventsloc = []
+
+    for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
+      let added = false
+      // console.log('  ciclo i = ', i, CalendarStore.state.eventlist[i])
+      if (CalendarStore.state.eventlist[i].date === dt) {
+        if (CalendarStore.state.eventlist[i].time) {
+          if (eventsloc.length > 0) {
+            // check for overlapping times
+            const startTime = new Date(CalendarStore.state.eventlist[i].date + ' ' + CalendarStore.state.eventlist[i].time)
+            const endTime = date.addToDate(startTime, { minutes: CalendarStore.state.eventlist[i].duration })
+            for (let j = 0; j < eventsloc.length; ++j) {
+              const startTime2 = new Date(eventsloc[j].date + ' ' + eventsloc[j].time)
+              const endTime2 = date.addToDate(startTime2, { minutes: eventsloc[j].duration2 })
+              if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
+                eventsloc[j].side = 'left'
+                // CalendarStore.state.eventlist[i].side = 'right'
+                eventsloc.push(CalendarStore.state.eventlist[i])
+                added = true
+                break
+              }
+            }
+          }
+        }
+        if (!added) {
+          // CalendarStore.state.eventlist[i].side = void 0
+          eventsloc.push(CalendarStore.state.eventlist[i])
+        }
+      } else if (CalendarStore.state.eventlist[i].days) {
+        // check for overlapping dates
+        const startDate = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
+        const endDate = date.addToDate(startDate, { days: CalendarStore.state.eventlist[i].days })
+        if (date.isBetweenDates(dt, startDate, endDate)) {
+          eventsloc.push(CalendarStore.state.eventlist[i])
+          added = true
+        }
+      }
+    }
+    return eventsloc
+  }
+
+  get static_data() {
+    return static_data
+  }
+
+  get EState() {
+    return EState
+  }
+
+  public getTitleBtnBooking() {
+    if (this.bookEventpage.state === EState.Creating)
+      return translate('dialog.book')
+    else
+      return translate('dialog.update')
+  }
+}
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
new file mode 100644
index 0000000..ad49e08
--- /dev/null
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -0,0 +1,625 @@
+$t('
+<template>
+    <div class="landing">
+        <CTitle imgbackground="../../statics/images/calendario_eventi.jpg"
+                headtitle="Calendario Eventi" sizes="max-height: 120px"></CTitle>
+
+
+        <q-page class="column">
+            <!-- display an myevent -->
+            <q-dialog v-model="displayEvent">
+                <q-card v-if="myevent">
+                    <q-toolbar :class="displayClasses(myevent)"
+                               :style="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="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></q-btn>
+                    </q-toolbar>
+                    <q-card-section class="inset-shadow">
+                        <q-img :src="`../../statics/`+myevent.img"
+                               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>
+                            <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">
+                                        <q-chip>
+                                            <q-avatar>
+                                                <img :src="`../../statics/images/avatar/` + myevent.avatar">
+                                            </q-avatar>
+                                            <span class="cal__teacher-content">{{myevent.teacher}}</span>
+                                        </q-chip>
+                                        <span v-if="myevent.avatar2 && myevent.teacher2" class="margin_avatar2"></span>
+                                        <q-chip v-if="myevent.avatar2 && myevent.teacher2">
+                                            <q-avatar>
+                                                <img :src="`../../statics/images/avatar/` + myevent.avatar2">
+                                            </q-avatar>
+                                            <span class="cal__teacher-content">{{myevent.teacher2}}</span>
+                                        </q-chip>
+                                    </span>
+                            </div>
+                            <div v-if="myevent.where" class="cal__where">
+                                <span v-if="tools.isMobile()"><br/></span>
+                                <span class="cal__where-title">{{$t('cal.where')}}: </span>
+                                <span class="cal__where-content">
+                                        <q-chip>
+                                            <q-avatar v-if="myevent.whereicon">
+                                                <img :src="`../../statics/images/avatar/` + myevent.whereicon">
+                                            </q-avatar>
+                                            <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
+                                            </q-avatar>
+                                            <span class="cal__teacher-content">{{myevent.where}}</span>
+                                        </q-chip>
+                                    </span>
+                            </div>
+                            <div v-if="myevent.date" class="cal__when">
+                                <span class="cal__where-title">{{$t('cal.when')}}: </span>
+                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
+                                <span v-if="myevent.days > 1" class="cal__where-content"> - {{func_tools.getDateStr(tools.addDays(myevent.date, myevent.days - 1))}}<br/></span>
+                                <span v-if="myevent.infoextra" class="cal__hours">
+                                        <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
+                                        <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
+                                    </span>
+                                <span v-else>
+                                        <span v-if="myevent.time" class="cal__hours">
+                                             -
+                                            <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
+                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ myevent.time }} {{$t('cal.endtime')}}: {{
+                                        getEndTime(myevent) }}</span>
+                                        </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="Vedi Info">
+                                </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)"
+                               :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>
+            <!-- add/edit an myevent -->
+
+            <q-dialog v-model="addEvent" no-backdrop-dismiss>
+                <q-card v-if="addEvent" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                    <q-toolbar class="bg-primary text-white">
+                        <q-toolbar-title>
+                            {{ addOrUpdateEvent }} Event
+                        </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-md">
+                            <q-input v-model="eventForm.title" autofocus label="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>
+                            <q-checkbox v-model="eventForm.allDay" :label="$t('cal.alldayevent')"></q-checkbox>
+
+                            <q-input v-if="eventForm.allDay" color="blue-6" filled
+                                     v-model="eventForm.dateTimeStart"
+                                     :label="$t('cal.enterdate')" mask="####-##-##">
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy v-model="showDateScrollerAllDay">
+                                            <q-date-scroller
+                                                    v-model="eventForm.dateTimeStart"
+                                                    :locale="locale"
+                                                    :hour24-format="true"
+                                                    :rounded-borders="true"
+                                                    border-color="#2196f3"
+                                                    bar-color="#2196f3"
+                                                    color="white"
+                                                    background-color="primary"
+                                                    inner-color="primary"
+                                                    inner-background-color="white"
+                                                    :style="scrollerPopupStyle160"
+                                                    @close="() => { showDateScrollerAllDay = false }"
+                                            />
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
+
+                            <div v-else class="q-gutter-sm">
+                                <q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
+                                         :label="$t('cal.enterdate')" mask="####-##-## ##:##">
+                                    <template #append>
+                                        <q-icon name="event" class="cursor-pointer">
+                                            <q-popup-proxy v-model="showDateTimeScrollerStart">
+
+                                                <q-date-time-scroller
+                                                        v-model="eventForm.dateTimeStart"
+                                                        :locale="locale"
+                                                        :hour24-format="true"
+                                                        :rounded-borders="true"
+                                                        border-color="#2196f3"
+                                                        bar-color="#2196f3"
+                                                        color="white"
+                                                        background-color="primary"
+                                                        inner-color="primary"
+                                                        inner-background-color="white"
+                                                        :style="scrollerPopupStyle280"
+                                                        @close="() => { showDateTimeScrollerStart = false }"
+                                                />
+
+                                            </q-popup-proxy>
+                                        </q-icon>
+                                    </template>
+                                </q-input>
+                                <q-input color="blue-6" outlined v-model="eventForm.dateTimeEnd"
+                                         :label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##">
+                                    <template #append>
+                                        <q-icon name="event" class="cursor-pointer">
+                                            <q-popup-proxy v-model="showDateTimeScrollerEnd">
+
+                                                <q-date-time-scroller
+                                                        v-model="eventForm.dateTimeEnd"
+                                                        :locale="locale"
+                                                        :hour24-format="true"
+                                                        :rounded-borders="true"
+                                                        border-color="#2196f3"
+                                                        bar-color="#2196f3"
+                                                        color="white"
+                                                        background-color="primary"
+                                                        inner-color="primary"
+                                                        inner-background-color="white"
+                                                        :style="scrollerPopupStyle280"
+                                                        @close="() => { showDateTimeScrollerEnd = false }"
+                                                />
+
+                                            </q-popup-proxy>
+                                        </q-icon>
+                                    </template>
+                                </q-input>
+                            </div>
+
+                            <q-input v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
+
+                            <q-input v-model="eventForm.icon" label="Icon"></q-input>
+                            <q-input
+                                    filled
+                                    v-model="eventForm.bgcolor"
+                            >
+                                <template #append>
+                                    <q-icon name="colorize" class="cursor-pointer">
+                                        <q-popup-proxy>
+                                            <q-color v-model="eventForm.bgcolor"></q-color>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
+                        </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>
+                            Book 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-img :src="`../../statics/`+myevent.img"
+                               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>
+                            <div v-if="myevent.date" class="cal__when">
+                                <span class="cal__where-title">{{$t('cal.when')}}: </span>
+                                <span class="cal__where-content">{{func_tools.getDateStr(myevent.date)}}</span>
+                                <span v-if="myevent.days > 1" class="cal__where-content"> - {{func_tools.getDateStr(tools.addDays(myevent.date, myevent.days - 1))}}<br/></span>
+                                <span v-if="myevent.infoextra" class="cal__hours">
+                                        <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
+                                        <span class="cal__hours-content">{{ myevent.infoextra }}  </span>
+                                    </span>
+                                <span v-else>
+                                        <span v-if="myevent.time" class="cal__hours">
+                                             -
+                                            <span class="cal__hours-title">{{$t('cal.hours')}}: </span>
+                                            <span class="cal__hours-content">{{$t('cal.starttime')}} {{ myevent.time }} {{$t('cal.endtime')}}: {{
+                                        getEndTime(myevent) }}</span>
+                                        </span>
+                                    </span>
+                            </div>
+                            <div class="q-pa-sm">
+                                <q-card
+                                        class="text-white windowcol">
+                                    <!--<q-card-section>-->
+                                    <!--<div class="text-h6"></div>-->
+                                    <!--<div class="text-subtitle2">by John Doe</div>-->
+                                    <!--</q-card-section>-->
+
+                                    <q-card-section>
+                                        <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')"
+                                                 autogrow>
+
+                                        </q-input>
+
+                                        <div class="q-gutter-md 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-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="Vedi Info">
+                                </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="CancelBookingEvent(myevent)"></q-btn>
+                        <q-btn 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>
+
+            <!--v-touch-swipe.mouse.left.right="handleSwipe" -->
+
+            <!-- the calendar -->
+
+            <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"/>
+                    <q-separator vertical/>
+                    <q-btn color="primary" :label="$t('dialog.today')" class="q-mx-md" @click="SetToday"></q-btn>
+                    <q-separator vertical/>
+                    <q-btn label="GG" color="primary" @click="calendarView = 'day'"/>
+                    <q-btn label="Set" color="primary" @click="calendarView = 'week'"/>
+                    <q-btn label="Mese" color="primary" @click="calendarView = 'month'"/>
+                    <q-space/>
+                </q-toolbar>
+                <q-separator/>
+                <div class="text-center"><span
+                        class="q-mr-xl q-toolbar__title nowrap text-blue">{{ title_cal }}</span>
+                </div>
+
+                <!--
+                        :theme="theme"
+                        :enable-themes="enableThemes === true"
+
+                -->
+                <q-calendar
+                        ref="calendar"
+                        class="calendar"
+                        :key="keyValue"
+                        v-model="selectedDate"
+                        :locale="locale"
+                        :maxDays="maxDays"
+                        animated
+                        transition-prev="slide-right"
+                        transition-next="slide-left"
+                        :dragOverFunc="onDragOver"
+                        :dropFunc="onDrop"
+                        :view="calendarView"
+                        :weekdays="weekdays"
+                        :interval-minutes="60 * intervalRangeStep"
+                        :interval-start="intervalStart"
+                        :interval-count="intervalCount"
+                        :hour24-format="hour24Format"
+                        :short-month-label="shortMonthLabel"
+                        :show-day-of-year-label="showDayOfYearLabel"
+                        :hide-header="hideHeader"
+                        :no-scroll="noScroll"
+                        :short-weekday-label="shortWeekdayLabel"
+                        :short-interval-label="shortIntervalLabel"
+                        :interval-height="intervalHeight"
+                        :resource-height="resourceHeight"
+                        :resource-width="resourceWidth"
+                        :day-height="dayHeight"
+                        :show-month-label="showMonthLabel"
+                        :show-work-weeks="showWorkWeeks"
+                        :resources="resources"
+                        @change="onChanged"
+                        @moved="onMoved"
+                        @click:date="onDateChanged"
+                        @click:interval="addEventMenu"
+                        @click:time="addEventMenu"
+                        @click:day="addEventMenu"
+                        @click:week="addEventMenu"
+                        @click:resource="resourceClicked"
+                        @click:resource:day="resourceDayClicked"
+                        dayPadding="35px 2px"
+                >
+
+                    <template #day="{ date }">
+                        <template v-for="(event, index) in getEvents(date)">
+                            <q-badge
+                                    :key="index"
+                                    style="width: 100%; cursor: pointer;"
+                                    class="ellipsis"
+                                    :class="badgeClasses(event, 'day')"
+                                    :style="badgeStyles(event, 'day')"
+                                    @click.stop.prevent="showEvent(event)"
+                                    :draggable="true"
+                                    @dragstart.native="(e) => onDragStart(e, event)"
+                                    @dragend.native="(e) => onDragEnd(e, event)"
+                                    @dragenter.native="(e) => onDragEnter(e, event)"
+                                    @touchmove.native="(e) => {}"
+                            >
+                                <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
+                                <span class="ellipsis">{{ event.title }}</span>
+                            </q-badge>
+                        </template>
+                    </template>
+
+                    <template #day-header="{ date }">
+                        <div class="row justify-center">
+                            <template v-for="(event, index) in eventsMap[date]">
+                                <q-badge
+                                        v-if="!event.time"
+                                        :key="index"
+                                        style="width: 100%; cursor: pointer;"
+                                        class="ellipsis"
+                                        :class="badgeClasses(event, 'header')"
+                                        :style="badgeStyles(event, 'header')"
+                                        @click.stop.prevent="showEvent(event)"
+                                        :draggable="true"
+                                        @dragstart.native="(e) => onDragStart(e, event)"
+                                        @dragend.native="(e) => onDragEnd(e, event)"
+                                        @dragenter.native="(e) => onDragEnter(e, event)"
+                                        @touchmove.native="(e) => {}"
+                                >
+                                    <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
+                                    <span class="ellipsis">{{ event.title }}</span>
+                                </q-badge>
+                                <q-badge
+                                        v-else
+                                        :key="index"
+                                        class="q-ma-xs"
+                                        :class="badgeClasses(event, 'header')"
+                                        :style="badgeStyles(event, 'header')"
+                                        style="width: 10px; max-width: 10px; height: 10px; max-height: 10px"
+                                />
+                            </template>
+                        </div>
+                    </template>
+                    <template #day-body="{ date, timeStartPos, timeDurationHeight }">
+                        <template v-for="(event, index) in getEvents(date)">
+                            <q-badge
+                                    v-if="event.time"
+                                    :key="index"
+                                    class="my-event justify-center ellipsis"
+                                    :class="badgeClasses(event, 'body')"
+                                    :style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
+                                    @click.stop.prevent="showEvent(event)"
+                                    :draggable="true"
+                                    @dragstart.native="(e) => onDragStart(e, event)"
+                                    @dragend.native="(e) => onDragEnd(e, event)"
+                                    @dragenter.native="(e) => onDragEnter(e, event)"
+                                    @touchmove.native="(e) => {}"
+                            >
+                                <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
+                                <span class="ellipsis">{{ event.title }}</span>
+                            </q-badge>
+                        </template>
+                    </template>
+                </q-calendar>
+            </div>
+
+        </q-page>
+
+        <div>
+            <p 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)">
+                        <p class="listaev__align_center_mobile">
+                            <img :src="`../../statics/`+event.img"
+                                 class="text-left padding_cell listaev__tdimg listaev__img">
+                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5"
+                                    color="green" text-color="white"
+                                    icon="event_available"
+                                    dense>{{$t('cal.booked')}}
+                            </q-chip>
+                        </p>
+                        <div class="listaev__date listaev__align_center_mobile">
+
+                            <div v-if="event.infoextra">
+                                    <span class="listaev__date">{{func_tools.getDateStr(event.date)}} - <span
+                                            class="cal__hours-content">{{ event.infoextra }}</span> </span>
+                            </div>
+                            <div v-else>
+                                <div v-if="event.date" class="listaev__date">
+                                    {{func_tools.getDateStr(event.date)}}
+                                    <span v-if="event.time" class="cal__hours-content"> - {{ event.time }} <span
+                                            v-if="event.duration">- {{ getEndTime(event) }}</span></span>
+                                    <span v-if="event.days > 1"><br/>{{func_tools.getDateStr(tools.addDays(event.date, event.days - 1))}}</span>
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <div class="">
+
+                            <div style="margin: 10px;"></div>
+
+                            <div class="listaev__align_center_mobile">
+                                <!-- 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>
+
+                                </q-btn>
+                                <!-- altrimenti mostra solo Chip -->
+                                <div v-else>
+                                    <div v-if="tools.isMobile()" class="cltexth3"
+                                         :style="`background-color: ${event.bgcolor} !important; color: white !important;`">
+                                        {{event.title}}
+                                    </div>
+                                    <q-chip v-else class="cltexth3" :color="event.bgcolor" text-color="white"
+                                            :icon="event.icon"
+                                            dense>{{event.title}}
+                                    </q-chip>
+                                </div>
+                            </div>
+
+                            <div style="margin: 10px;"></div>
+
+                            <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>
+                                    <q-avatar>
+                                        <img :src="`../../statics/images/avatar/` + event.avatar">
+                                    </q-avatar>
+                                    <span class="cal__teacher-content">{{event.teacher}}</span>
+                                </q-chip>
+                                <span v-if="event.avatar2" class="margin_avatar2"></span>
+                                <q-chip v-if="event.avatar2 && event.teacher2">
+                                    <q-avatar>
+                                        <img :src="`../../statics/images/avatar/` + event.avatar2">
+                                    </q-avatar>
+                                    <span class="cal__teacher-content">{{event.teacher2}}</span>
+                                </q-chip>
+
+                                <span v-if="event.where" class="">
+                                        <span v-if="tools.isMobile()"><br/></span>
+                                        <span class="cal__where-title">{{$t('cal.where')}}: </span>
+
+                                        <q-chip>
+                                            <q-avatar v-if="event.whereicon">
+                                                <img :src="`../../statics/images/avatar/` + event.whereicon">
+                                            </q-avatar>
+                                            <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
+                                            </q-avatar>
+                                            <span class="cal__teacher-content">{{event.where}}</span>
+                                        </q-chip>
+                                    </span>
+                            </div>
+                            <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"
+                                                   label="Vedi Info">
+
+                                            </q-btn>
+                                        </span>
+                            </p>
+                            <div class="row justify-end">
+                                <q-btn rounded outline
+                                       v-if="!event.nobookable && !isAlreadyBooked(event) && static_data.functionality.BOOKING_EVENTS"
+                                       color="primary" @click="addBookEventMenu(event)"
+                                       :label="$t('cal.booking')">
+                                </q-btn>
+                                <q-btn rounded outline
+                                       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>
+                    </td>
+                </tr>
+                </tbody>
+            </q-markup-table>
+
+            <!-- Example of a Dialog with a Card -->
+            <!--
+                            <q-dialog v-model="card">
+                                <q-card>
+                                    <q-img src="https://media-cdn.tripadvisor.com/media/photo-s/0a/47/a8/91/chicken-salad-sandwich.jpg" />
+
+                                    <q-card-section>
+                                        <q-btn
+                                                fab
+                                                color="primary"
+                                                icon="place"
+                                                class="absolute"
+                                                style="top: 0; right: 12px; transform: translateY(-50%);"
+                                        />
+
+                                        <div class="row no-wrap items-center">
+                                            <div class="col text-h6 ellipsis">Cafe Basilico</div>
+                                            <div class="col-auto text-grey q-pt-md">
+                                                <q-icon name="place" /> 250 ft
+                                            </div>
+                                        </div>
+
+                                        <q-rating v-model="stars" :max="5" size="32px" />
+                                    </q-card-section>
+
+                                    <q-card-section>
+                                        <div class="text-subtitle1">$・Italian, Cafe</div>
+                                        <div class="text-subtitle2 text-grey">Small plates, salads & sandwiches in an intimate setting.</div>
+                                    </q-card-section>
+
+                                    <q-separator />
+
+                                    <q-card-actions>
+                                        <q-btn flat round icon="event" v-close-popup />
+                                        <q-btn flat v-close-popup>5:30PM</q-btn>
+                                        <q-btn flat v-close-popup>7:30PM</q-btn>
+                                        <q-btn flat v-close-popup>9:00PM</q-btn>
+                                        <q-btn flat color="primary" v-close-popup>Reserve</q-btn>
+                                    </q-card-actions>
+                                </q-card>
+                            </q-dialog>
+            -->
+        </div>
+    </div>
+</template>
+<script lang="ts" src="./CEventsCalendar.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CEventsCalendar.scss';
+</style>
diff --git a/src/components/CEventsCalendar/index.ts b/src/components/CEventsCalendar/index.ts
new file mode 100644
index 0000000..c818b4f
--- /dev/null
+++ b/src/components/CEventsCalendar/index.ts
@@ -0,0 +1 @@
+export {default as CEventsCalendar} from './CEventsCalendar.vue'