refactor(task-modal): fixed calendar position in timeblocks

app/src/plugins/tm@modal/task/_components/a-timeblock.vue

@@ -6,11 +6,11 @@
     <div
       @click="handleDatepickerClick"
       class="datepicker-wrapper"
-      ref="datepicker-wrapper"
+      :ref="`timeblock-datepicker-wrapper-${index}`"
     >
       <Datepicker
         :model-value="timeblock.date"
-        ref="datepicker"
+        :ref="`timeblock-datepicker-${index}`"
         @update:model-value="updateDate"
         format="dd.MM.yyyy"
         locale="sk"
@@ -85,6 +85,10 @@ export default {
       type: Function,
       default: () => ({}),
     },
+
+    index: {
+      type: Number,
+    },
   },
 
   data() {
@@ -105,10 +109,42 @@ export default {
   methods: {
     handleDatepickerClick() {
       // Pass the datepicker wrapper element reference to the mixin
-      const scrollTarget = this.$refs['datepicker-wrapper'];
+      const scrollTarget =
+        this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
       this.onDateOpen(scrollTarget);
       // Open the datepicker
-      this.openDatepicker('datepicker');
+      this.openDatepicker(`timeblock-datepicker-${this.index}`);
+
+      setTimeout(() => {
+        const calendar = document.querySelector(
+          '.dp__menu.dp__menu_index.dp__theme_light',
+        );
+
+        if (!calendar) return;
+
+        // Get the datepicker wrapper element
+        const datepickerWrapper =
+          this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
+
+        // Get the modal container
+        const modalContainer = document.querySelector('.v-overlay__content');
+
+        if (!datepickerWrapper || !modalContainer) return;
+
+        // Get bounding rectangles
+        const wrapperRect = datepickerWrapper.getBoundingClientRect();
+        const modalRect = modalContainer.getBoundingClientRect();
+
+        // Calculate position relative to modal
+        const topPosition =
+          wrapperRect.top - modalRect.top + wrapperRect.height;
+        const leftPosition = wrapperRect.left - modalRect.left;
+
+        // Apply positioning
+        // calendar.style.position = 'absolute';
+        calendar.style.top = `${topPosition + 210}px`;
+        // calendar.style.left = `${leftPosition}px`;
+      }, 100);
     },
 
     async openDatepicker(ref) {