[calendar fix]

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

@@ -3,7 +3,9 @@
         <div v-if="deletable && editable" class="x-button">
             <button @click="$emit('removeTimeblock')" class="x-button">x</button>
         </div>
-        <Datepicker :model-value="timeblock.date" @focus="$emit('onDateFocus')" @update:model-value="updateDate" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :auto-apply="true" :enable-time-picker="false" class="mb-5 modal-input" />
+        <div @click="openDatepicker('datepicker')" class="datepicker-wrapper" ref="datepicker-wrapper">
+            <Datepicker :model-value="timeblock.date" ref="datepicker" @focus="onDateFocus" @update:model-value="updateDate" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :auto-apply="true" :enable-time-picker="false" class="mb-5 modal-input datepicker-input" />
+        </div>
         <div class="splitted-time-inputs">
             <v-text-field :value="timeblock.starts_at_time" @input="updateStartTime" @focus="onInputFocus" :class="{ error: v$?.timeblock.starts_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Začiatok" />
             <v-text-field :value="timeblock.ends_at_time" @input="updateEndTime" @focus="onInputFocus" :class="{ error: v$?.timeblock.ends_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Koniec" />
@@ -15,13 +17,15 @@
 import useVuelidate from '@vuelidate/core'
 import { requiredIf } from '@vuelidate/validators'
 import Datepicker from '@vuepic/vue-datepicker'
+import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 
 export default {
+    mixins: [VuetifyFixFocusMixin],
+
     components: {
         Datepicker
     },
 
-
     props: {
         timeblock: {
             type: Object,
@@ -55,6 +59,18 @@ export default {
     },
 
     methods: {
+        async openDatepicker(ref) {
+			this.$refs[ref].openMenu()
+            this.$nextTick(() => {
+                this.$refs['datepicker-wrapper'].scrollIntoView({ behavior: 'instant', block: 'center', inline: 'center' })
+                this.$nextTick(() => {
+                    const popup = document.querySelector('.dp__menu.dp__menu_index')
+                    const isBottom = popup.querySelector('.dp__arrow_bottom')
+                    const yDifference = isBottom ? 0 - popup.clientHeight - 42 : 35
+                    popup.style.top = window.innerHeight / 2 + yDifference + 'px'
+                })
+            })
+		},
         onFocus() {
             console.log('focus')
         },
@@ -100,4 +116,10 @@ export default {
 
 .error input
     border: 1px solid red !important
+
+.datepicker-wrapper
+    width: 100%
+    .datepicker-input
+        width: 100% !important
+        pointer-events: none
 </style>e