feat: enable resize of weekday event slot

src/components/week/DayEvent.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="!isCustomEvent"
     class="calendar-week__event is-event"
     :class="{
       'is-editable': isEditable,
@@ -9,8 +8,6 @@
     :style="{
       ...requiredStyles,
       border: getBorderRule,
-      color: eventColor,
-      backgroundColor: eventBackgroundColor,
     }"
     :data-ref="'event-' + event.id"
     @click="handleClickOnEvent"
@@ -19,13 +16,16 @@
     @mousedown="initDrag"
     @touchstart="initDrag"
   >
-    <div class="calendar-week__event-info-wrapper">
-      <div
-        v-if="showResizeElements"
-        class="calendar-week__event-resize calendar-week__event-resize-up"
-        @mousedown="resizeEvent('up')"
-      />
-
+    <div
+      v-if="!isCustomEvent"
+      class="calendar-week__event-info-wrapper"
+      :style="{
+        color: eventColor,
+        width: '100%',
+        height: '100%',
+        backgroundColor: eventBackgroundColor,
+      }"
+    >
       <div class="calendar-week__event-row is-title">
         {{ event.title }}
       </div>
@@ -94,35 +94,25 @@
             ')',
         }"
       />
-
-      <div
-        v-if="showResizeElements"
-        class="calendar-week__event-resize calendar-week__event-resize-down"
-        @mousedown="resizeEvent('down')"
-      />
     </div>
-  </div>
 
-  <div
-    v-else
-    :style="{
-      ...requiredStyles,
-      border: getBorderRule,
-      color: eventColor,
-    }"
-    class="calendar-week__event is-event"
-    :class="{
-      'is-editable': isEditable,
-      'has-disabled-dnd': hasDisabledDragAndDrop,
-    }"
-    @click="handleClickOnEvent"
-    @mousedown="initDrag"
-    @touchstart="initDrag"
-  >
     <slot
+      v-else
       name="weekDayEvent"
       :event-data="event"
     />
+
+    <div
+      v-if="showResizeElements"
+      class="calendar-week__event-resize calendar-week__event-resize-up"
+      @mousedown="resizeEvent('up')"
+    />
+
+    <div
+      v-if="showResizeElements"
+      class="calendar-week__event-resize calendar-week__event-resize-down"
+      @mousedown="resizeEvent('down')"
+    />
   </div>
 </template>
 
@@ -651,6 +641,7 @@ export default defineComponent({
   cursor: pointer;
   box-sizing: content-box;
   user-select: none;
+  overflow: hidden;
 
   &.is-editable {
     cursor: grab;
@@ -677,7 +668,6 @@ export default defineComponent({
     font-size: var(--qalendar-font-xs);
     height: 100%;
     box-sizing: border-box;
-    overflow: hidden;
     user-select: none;
   }
 

tests/unit/components/week/DayEvent.test.ts

@@ -1,4 +1,4 @@
-import {mount} from "@vue/test-utils";
+import {mount, VueWrapper} from "@vue/test-utils";
 import DayEvent from "../../../../src/components/week/DayEvent.vue";
 import {describe, expect, test, it, vi } from "vitest";
 import Time, {TimeBuilder, WEEK_START_DAY} from "../../../../src/helpers/Time";
@@ -38,6 +38,10 @@ function getEventElement(wrapper: any) {
   return wrapper.find(EVENT_ELEMENT_SELECTOR);
 }
 
+function getInfoElement(wrapper: VueWrapper) {
+  return wrapper.find(".calendar-week__event-info-wrapper");
+}
+
 describe("DayEvent.vue", () => {
   it("should display the title of av event", () => {
     const event = new EventBuilder({ start: "2022-05-20 09:00", end: "2022-05-20 10:00" })
@@ -163,14 +167,14 @@ describe("DayEvent.vue", () => {
       },
     });
 
-    const eventElement = getEventElement(wrapper);
+    const infoElement = getInfoElement(wrapper);
 
     wrapper.vm.setColors();
     await nextTick();
-    expect(eventElement.attributes().style).toContain(
+    expect(infoElement.attributes().style).toContain(
       "background-color: rgb(255, 64, 129)"
     ); // The pink BG
-    expect(eventElement.attributes().style).toContain(
+    expect(infoElement.attributes().style).toContain(
       "color: rgb(255, 255, 255)"
     ); // The white text
   });
@@ -191,14 +195,14 @@ describe("DayEvent.vue", () => {
       },
     });
 
-    const eventElement = getEventElement(wrapper)
+    const infoElement = getInfoElement(wrapper);
 
     wrapper.vm.setColors();
     await nextTick();
-    expect(eventElement.attributes().style).toContain(
+    expect(infoElement.attributes().style).toContain(
       `background-color: ${EVENT_COLORS[expectedColor]}`
     ); // The green BG
-    expect(eventElement.attributes().style).toContain(
+    expect(infoElement.attributes().style).toContain(
       "color: rgb(255, 255, 255)"
     ); // The white text
   })
@@ -216,10 +220,10 @@ describe("DayEvent.vue", () => {
       }
     });
 
-    const eventElement = getEventElement(wrapper)
+    const infoElement = getInfoElement(wrapper);
     wrapper.vm.setColors();
     await nextTick();
-    expect(eventElement.attributes().style).toContain(
+    expect(infoElement.attributes().style).toContain(
       `background-color: ${EVENT_COLORS.blue}`
     )
   })