Vuetify - Can't drag and drop all-day events in monthly view - vue.js

Question

With vuetify and its v-calendar only not-daily events can be dragged when you are in week and day view (in monthly view not work at all).
I would like to move daily events (during entire day, not from 00:01 to 23:59) to another day when you are in month view (mainly) or in week view
Template (only related parts):
<v-calendar
ref="calendar"
v-model="value"
:weekdays="weekday"
:type="type"
:events="events"
:event-overlap-mode="mode"
:event-overlap-threshold="30"
:event-color="getEventColor"
#change="getEvents"
#click:event="showEvent"
#mousedown:event="startDrag"
#mousedown:time="startTime"
#mousemove:time="mouseMove"
#mouseup:time="endDrag"
#mouseleave.native="cancelDrag"
>
<template #event="{ event, timed, eventSummary }">
<div class="v-event-draggable" v-html="eventSummary()" />
<div
v-if="timed"
class="v-event-drag-bottom"
#mousedown.stop="extendBottom(event)"
/>
</template>
</v-calendar>
script (only related functions):
startDrag({ event, timed }) {
if (event && timed) {
this.dragEvent = event;
this.dragTime = null;
this.extendOriginal = null;
}
},
startTime(tms) {
const mouse = this.toTime(tms);
if (this.dragEvent && this.dragTime === null) {
const start = this.dragEvent.start;
this.dragTime = mouse - start;
} else {
this.createStart = this.roundTime(mouse);
this.createEvent = {
name: `Event #${this.events.length}`,
color: this.rndElement(this.colors),
start: this.createStart,
end: this.createStart,
timed: true
};
this.events.push(this.createEvent);
}
},
mouseMove(tms) {
const mouse = this.toTime(tms);
if (this.dragEvent && this.dragTime !== null) {
const start = this.dragEvent.start;
const end = this.dragEvent.end;
const duration = end - start;
const newStartTime = mouse - this.dragTime;
const newStart = this.roundTime(newStartTime);
const newEnd = newStart + duration;
this.dragEvent.start = newStart;
this.dragEvent.end = newEnd;
} else if (this.createEvent && this.createStart !== null) {
const mouseRounded = this.roundTime(mouse, false);
const min = Math.min(mouseRounded, this.createStart);
const max = Math.max(mouseRounded, this.createStart);
this.createEvent.start = min;
this.createEvent.end = max;
}
},
endDrag() {
this.dragTime = null;
this.dragEvent = null;
this.createEvent = null;
this.createStart = null;
this.extendOriginal = null;
},
cancelDrag() {
if (this.createEvent) {
if (this.extendOriginal) {
this.createEvent.end = this.extendOriginal;
} else {
const i = this.events.indexOf(this.createEvent);
if (i !== -1) {
this.events.splice(i, 1);
}
}
}
this.createEvent = null;
this.createStart = null;
this.dragTime = null;
this.dragEvent = null;
},
}
};
Full Code here: https://codepen.io/iessIsMore/pen/rNGjzpJ
Thanks for the help

Answer 1

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.