[Vuejs]-Vuetify – Can't drag and drop all-day events in monthly view

by

0👍

mousedown events have to be changed to day instead of time
I tried to to solve the problem , here is the solution.
Codepen Link

<div id="app">
<v-app id="inspire">
<v-row class="fill-height">
  <v-col>
    <v-sheet height="600">
      <v-calendar
        ref="calendar"
        v-model="value"
        color="primary"
        type="4day"
        :events="events"
        :event-color="getEventColor"
        :event-ripple="false"
        @change="getEvents"
        @mousedown:event="startDrag"
        @mousedown:day="startTime"
        @mousemove:day="mouseMove"
        @mouseup:day="endDrag"
        @mouseleave.native="cancelDrag"
      >
        <template v-slot:event="{ event, timed, eventSummary }">
          <div
            class="v-event-draggable"
            v-html="eventSummary()"
          ></div>
          <div
            v-if="!timed"
          ></div>
        </template>
      </v-calendar>
    </v-sheet>
  </v-col>
</v-row>
</v-app>
</div>

Would like to know the insights of other people regarding my solution.
Thanks.

Leave a comment