Using eventsMap or getEvents to show the events

[sfakhrym]

Hello,
Anyway, thanks for this awesome calendar for Quasar, really appreciated it :)

I have been exploring how to add and edit event in the calendar. I am working with Quasar V2 and Quasar-Calendar V2.

The project I am working is going to display, edit, and add event.

I am using Q-calendar-month (slot day), where the function of looping the event using eventsMap function. But, when I looked the example in Q-calendar-demo in Q-calendar V1.15, it uses getEvents function.
So, which is better to use in my case?

Furthermore, when I used eventsMap function, I am confused with this syntax, which is adding array [timestamp.date] in v-for="(event, index) in eventsMap[timestamp.date]" of V2 Q-calendar-month, but in getEvents function of V1.15 Q-calendar, it uses
v-for="(event, index) in getEvents(timestamp.date)", not using array syntax in ( (timestamp.date) )

So, what is actually the difference?

Thanks in advance for the help :)

[hawkeye64]

@fakhruddinmasse In the end, it's just JavaScript and you should adapt your own code to fit best with how your data is presented to you from a database. The examples are using static data, which may not be the best scenario for your use case.

[sfakhrym]

Thanks for the respond @hawkeye64

I have tried around, and end up with this code below using the composition API in Q-Calendar V2 by following the code in the example from V1.5, everything was working fine, but, i couldn't show the dialog for adding event, especially after I wrap the code inside the Q-form. I think there should be error in the code, but I couldn't figure it out, please If I can get some clues,

Thank You Jeff :)

Really appreciated it

<template>
  <q-page class="column" style="overflow: hidden">

    <!-- Add Event -->
    <q-dialog v-model="addEvent" no-backdrop-dismiss>
      <div>
        <q-form
          v-if="contextDay"
          @submit="onSubmit"
          @reset="onReset"
        >
        <!-- BODY CARD -->
          <q-card v-if="addEvent" style="width: 400px;">

            <!-- TITLE TOOLBAR -->
            <q-toolbar>
              <q-toolbar-tittle class="bg-primary text-white">
                {{ addOrUpdateEvent }} Event
              </q-toolbar-tittle>
              <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
            </q-toolbar>

            <!-- INPUT FIELDs -->
            <q-card-section>

              <!-- TITLE -->
              <q-input
                v-model="eventForm.title"
                label="Title"
                :rules="[v => v && v.length > 0 || 'Field cannot be empty']"
                autofocus
              />

              <!-- DETAIL -->
              <q-input
                v-model="eventForm.details"
                label="Details"
              />

              <!-- DATE -->
              <q-input
                v-if="eventForm.allDay"
                v-model="eventForm.dateTimeStart"
                label="Enter date"
                mask="####-##-##"
                color="blue-6"
                outlined
                style="padding-bottom: 20px;"
              >
                <template #append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy v-model="showDateScrollerAllDay">

                      <!-- <q-scroller
                        v-model="eventForm.dateTimeStart"
                        view="date"
                        :locale="locale"
                        :hour24-format="true"
                        :rounded-borders="true"
                        border-color="#2196f3"
                        bar-color="#2196f3"
                        text-color="white"
                        color="primary"
                        inner-text-color="primary"
                        inner-color="white"
                        :style="scrollerPopupStyle160"
                        @close="() => { showDateScrollerAllDay = false }"
                      /> -->

                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>

              <!-- ICON -->
              <q-input
                v-model="eventForm.icon"
                label="Icon"
                outlined
                clearable
                style="padding-bottom: 20px;"
              >
                <template #append>
                  <q-icon name="extension" class="cursor-pointer">
                    <q-popup-proxy v-model="showIconPicker">

                      <!-- <q-icon-picker
                        v-model="eventForm.icon"
                        :filter="eventForm.icon"
                        icon-set="fontawesome-v5"
                        tooltips
                        :pagination.sync="pagination"
                        style="height: 300px; width: 300px; background-color: white;"
                      /> -->

                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>

              <!-- COLOR -->
              <q-input
                v-model="eventForm.bgcolor"
                label="Color"
                outlined
                clearable
              >
                <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-card-section>

          </q-card>
        </q-form>
      </div>
    </q-dialog>

    <!-- Calendar -->
    <div class="subcontent">
      <navigation-bar
        @today="onToday"
        @prev="onPrev"
        @next="onNext"
      />

      <div class="row justify-center">
        <div style="display: flex; max-width: 800px; width: 100%; height: 400px;">
          <q-calendar-month
            ref="calendar"
            v-model="selectedDate"
            animated
            bordered
            focusable
            hoverable
            no-active-date
            :day-min-height="60"
            :day-height="0"
            @change="onChange"
            @moved="onMoved"
            @click-date="onClickDate"
            @click-day="onClickDay"
            @click-workweek="onClickWorkweek"
            @click-head-workweek="onClickHeadWorkweek"
            @click-head-day="onClickHeadDay"
          >
            <template #day="{ scope: { timestamp } }">
              <template
                v-for="(event,index) in eventsMap[timestamp.date]"
                :key="index"
              >
                <div
                  :class="badgeClasses(event, 'day')"
                  :style="badgeStyles(event, 'day')"
                  class="my-event"
                >
                  <abbr
                    :title="event.details"
                    class="tooltip"
                  >
                    <span :key="index" class="title q-calendar__ellipsis">{{ event.title + (event.time ? ' - ' + event.time : '') }}</span>
                  </abbr>
                </div>
              </template>
            </template>


          </q-calendar-month>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import {
  QCalendarMonth,
  addToDate,
  parseDate,
  parseTimestamp,
  today,
  makeDateTime
} from '@quasar/quasar-ui-qcalendar'
import { date } from 'quasar'
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass'
import { defineComponent, ref, reactive, computed } from 'vue'
import NavigationBar from '../NavigationBar.vue'
// The function below is used to set up our demo data
const CURRENT_DAY = new Date()
function getCurrentDay (day) {
  const newDay = new Date(CURRENT_DAY)
  newDay.setDate(day)
  const tm = parseDate(newDay)
  console.log(tm.date)
  return tm.date
}
const formDefault = {
  title: '',
  details: '',
  allDay: false,
  dateTimeStart: '',
  dateTimeEnd: '',
  icon: '',
  bgcolor: '#0000FF'
}
export default defineComponent({
  name: 'MonthSlotDay',
  components: {
    NavigationBar,
    QCalendarMonth
  },
  setup(){
    const addEvent = ref(false)
    const contextDay = ref(null)
    const eventForm = { ...formDefault }
    const showDateScrollerAllDay = ref(false)
    const showIconPicker = ref(false)

    const calendar = ref(null)
    const selectedDate = ref(today())
    const event = ref(null)
    const events = reactive([
        {
          id: 1,
          title: '1st of the Month',
          details: 'Everything is funny as long as it is happening to someone else',
          date: getCurrentDay(1),
          bgcolor: 'orange'
        },
        {
          id: 2,
          title: 'Sisters Birthday',
          details: 'Buy a nice present',
          date: getCurrentDay(4),
          bgcolor: 'green',
          icon: 'fas fa-birthday-cake'
        },
        {
          id: 3,
          title: 'Meeting',
          details: 'Time to pitch my idea to the company',
          date: getCurrentDay(10),
          time: '10:00',
          duration: 120,
          bgcolor: 'red',
          icon: 'fas fa-handshake'
        },
        {
          id: 4,
          title: 'Lunch',
          details: 'Company is paying!',
          date: getCurrentDay(10),
          time: '11:30',
          duration: 90,
          bgcolor: 'teal',
          icon: 'fas fa-hamburger'
        },
        {
          id: 5,
          title: 'Visit mom',
          details: 'Always a nice chat with mom',
          date: getCurrentDay(20),
          time: '17:00',
          duration: 90,
          bgcolor: 'grey',
          icon: 'fas fa-car'
        },
        {
          id: 6,
          title: 'Conference',
          details: 'Teaching Javascript 101',
          date: getCurrentDay(22),
          time: '08:00',
          duration: 540,
          bgcolor: 'blue',
          icon: 'fas fa-chalkboard-teacher'
        },
        {
          id: 7,
          title: 'Girlfriend',
          details: 'Meet GF for dinner at Swanky Restaurant',
          date: getCurrentDay(22),
          time: '19:00',
          duration: 180,
          bgcolor: 'teal',
          icon: 'fas fa-utensils'
        },
        {
          id: 8,
          title: 'Rowing',
          details: 'Stay in shape!',
          date: getCurrentDay(27),
          bgcolor: 'purple',
          icon: 'rowing',
          days: 2
        },
        {
          id: 9,
          title: 'Fishing',
          details: 'Time for some weekend R&R',
          date: getCurrentDay(27),
          bgcolor: 'purple',
          icon: 'fas fa-fish',
          days: 2
        },
        {
          id: 10,
          title: 'Vacation',
          details: 'Trails and hikes, going camping! Don\'t forget to bring bear spray!',
          date: getCurrentDay(29),
          bgcolor: 'purple',
          icon: 'fas fa-plane',
          days: 5
        }
      ])

    const addOrUpdateEvent = computed(() => {
      if (contextDay.value && contextDay.value.bgcolor) {
        return 'Update'
      }
      return 'Add'
    })

    const eventsMap = computed(() => {
      const map = {}
      if (events.length > 0) {
          events.forEach(event => {
          (map[ event.date ] = (map[ event.date ] || [])).push(event)
          if (event.days !== undefined) {
            let timestamp = parseTimestamp(event.date)
            let days = event.days
            // add a new event for each day
            // skip 1st one which would have been done above
            do {
              timestamp = addToDate(timestamp, { day: 1 })
              if (!map[ timestamp.date ]) {
                map[ timestamp.date ] = []
              }
              map[ timestamp.date ].push(event)
              // already accounted for 1st day
            } while (--days > 1)
          }
        })
      }
      console.log(map)
      return map
    })


    function badgeClasses(event, type){
      return {
        [ `text-white bg-${ event.bgcolor }` ]: true,
        'rounded-border': true
      }
    }
    function findEventIndex (event) {
      for (let i = 0; i < events.length; ++i) {
        if (event.title === events[i].title &&
          event.details === events[i].details &&
          event.date === events[i].date) {
          return i
        }
      }
    }

    function getDuration (dateTimeStart, dateTimeEnd, unit) {
      const start = makeDateTime(parseTimestamp(dateTimeStart))
      const end = makeDateTime(parseTimestamp(dateTimeEnd))
      const diff = date.getDateDiff(end, start, unit)
      return diff
    }

    function onSubmit(){
      saveEvent()
    }
    function saveEvent(){
      event.value.validate().then(success => {
        if (success) {
          // close the dialog
          addEvent.value = false
          const form = { ...eventForm.value }
          let update = false
          if (contextDay.value.bgcolor) {
            // an update
            update = true
          }
          else {
            // an add
          }
          const data = {
            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 = getDuration(form.dateTimeStart, form.dateTimeEnd, 'minutes')
          }
          if (update === true) {
            const index = findEventIndex(self.contextDay)
            if (index >= 0) {
              events.splice(index, 1, { ...data })
            }
          }
          else {
            // add to events array
            events.push(data)
          }

          self.contextDay = null
        }
      })
    }
    function onReset(){

    }
    function badgeStyles (day, event) {
      const s = {}
      // s.left = day.weekday === 0 ? 0 : (day.weekday * this.parsedCellWidth) + '%'
      // s.top = 0
      // s.bottom = 0
      // s.width = (event.days * this.parsedCellWidth) + '%'
      return s
    }
    function onToday () {
      calendar.value.moveToToday()
    }
    function onPrev () {
      calendar.value.prev()
    }
    function onNext () {
      calendar.value.next()
    }
    function onMoved (data) {
      console.log('onMoved', data)
    }
    function onChange (data) {
      console.log('onChange', data)
    }
    function onClickDate (data) {
      console.log('onClickDate', data)
    }
    // function onClickDay ({scope, event}) {
    //   console.log('onClickDay', scope.timestamp, event)
    // }
    function onClickDay () {
      addEvent.value = true
    }
    function onClickWorkweek (data) {
      console.log('onClickWorkweek', data)
    }
    function onClickHeadDay (data) {
      console.log('onClickHeadDay', data)
    }
    function onClickHeadWorkweek (data) {
      console.log('onClickHeadWorkweek', data)
    }


    return {
      addEvent,
      addOrUpdateEvent,
      contextDay,
      eventForm,
      showDateScrollerAllDay,
      showIconPicker,
      calendar,
      selectedDate,
      events,
      eventsMap,
      findEventIndex,
      getDuration,
      onSubmit,
      saveEvent,
      onReset,
      badgeClasses,
      badgeStyles,
      onToday,
      onPrev,
      onNext,
      onMoved,
      onChange,
      onClickDate,
      onClickDay,
      onClickWorkweek,
      onClickHeadDay,
      onClickHeadWorkweek
    }
  }
})
</script>

[hawkeye64]

Can you clone this CodePen and add your code to it so I can help you better: https://codepen.io/Hawkeye64/pen/dyvpYwW

[sfakhrym]

Thanks Jeff @hawkeye64 for sharing!

here is the codepen I cloned https://codepen.io/fakhruddinmasse/pen/dyvpzjK

I can't get the dialog when I click the day..

[hawkeye64]

@fakhruddinmasse There was a typo for q-titlebar-tittle, but that didn't fix the QDialog issue.
I added a different QDialog and used the same var as the other one and then renamed the one used by the original QDialog.
This QDialog does show up. There's something wrong with the current one.
I suggest cutting it back and adding it back bit-by-bit to see where the issue is coming from
Btw, the dialog runs because the backdrop appears (after fixing the typo) and you can press ESC to get out of it (but no actual dialog appears)
https://codepen.io/Hawkeye64/pen/YzZGdVe?editors=1010

[sfakhrym]

@hawkeye64 Ok Jeff. Alright I will check bit by bit. Thanks for helping out. Really appreciated it :)