diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index ac6360dda6..e323234854 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -1124,3 +1124,14 @@
   align-items: center;
   min-width: 0;
 }
+
+/* Tasks in Calendar (WorkSlot) */
+.tasksGroup-container .task-item.dragged {
+  overflow: hidden;
+  background-color: var(--theme-bg-color);
+  border-color: var(--theme-divider-color);
+  border-radius: .125rem;
+  opacity: .75;
+
+  .task-icon { opacity: 0; }
+}
diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index a9e9ca04d4..fbe0b527b2 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -60,6 +60,10 @@
   }
   const rem = (n: number): number => n * fontSize
 
+  export function getCalendarRect (): DOMRect | undefined {
+    return container ? calendarRect : undefined
+  }
+
   const offsetTZ = new Date().getTimezoneOffset() * 60 * 1000
 
   const toCalendar = (
@@ -510,7 +514,7 @@
   let dragOnOld: CalendarCell | null = null
 
   const getMinutes = (e: MouseEvent): number => (e.offsetY >= cellHeight / 2 ? 30 : 0)
-  const dragOver = (e: MouseEvent, day: Date, hourOfDay: number) => {
+  const dragOver = (e: DragEvent & { currentTarget: EventTarget & HTMLDivElement }, day: Date, hourOfDay: number) => {
     const dragOn: CalendarCell = {
       day,
       hourOfDay,
@@ -528,6 +532,7 @@
     dispatch('dragenter', {
       date: new Date(day.setHours(hourOfDay + startHour, dragOn.minutes, 0, 0))
     })
+    e.preventDefault()
   }
 </script>
 
@@ -537,6 +542,7 @@
 >
   <div
     bind:this={container}
+    on:dragleave
     class="calendar-container"
     style:--calendar-ad-height={styleAD + 'px'}
     style:grid={`${showHeader ? '[header] 3.5rem ' : ''}[all-day] ${styleAD}px repeat(${