From c115e6d83fe1b86e0467d22449a838db58cc2042 Mon Sep 17 00:00:00 2001
From: Nico Hirsch <30938717+noxhirsch@users.noreply.github.com>
Date: Fri, 5 Dec 2025 17:05:47 +0100
Subject: [PATCH] feat: Put calendar directly in the date picker dialogs
 (#6110)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Michael Genson <genson.michael@gmail.com>
---
 .../RecipeContextMenuContent.vue              | 35 ++++-----------
 .../pages/household/mealplan/planner/edit.vue | 44 ++++++-------------
 2 files changed, 22 insertions(+), 57 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue b/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue
index 953c948c9..81e942d8d 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue
@@ -45,31 +45,15 @@
     @confirm="addRecipeToPlan()"
   >
     <v-card-text>
-      <v-menu
-        v-model="pickerMenu"
-        :close-on-content-click="false"
-        transition="scale-transition"
-        offset-y
-        max-width="290px"
-        min-width="auto"
-      >
-        <template #activator="{ props: activatorProps }">
-          <v-text-field
-            :model-value="$d(newMealdate)"
-            :label="$t('general.date')"
-            :prepend-icon="$globals.icons.calendar"
-            v-bind="activatorProps"
-            readonly
-          />
-        </template>
-        <v-date-picker
-          v-model="newMealdate"
-          hide-header
-          :first-day-of-week="firstDayOfWeek"
-          :local="$i18n.locale"
-          @update:model-value="pickerMenu = false"
-        />
-      </v-menu>
+      <v-date-picker
+        v-model="newMealdate"
+        class="mx-auto mb-3"
+        hide-header
+        show-adjacent-months
+        color="primary"
+        :first-day-of-week="firstDayOfWeek"
+        :local="$i18n.locale"
+      />
       <v-select
         v-model="newMealType"
         :return-object="false"
@@ -207,7 +191,6 @@ const loading = ref(false);
 const menuItems = ref<ContextMenuItem[]>([]);
 const newMealdate = ref(new Date());
 const newMealType = ref<PlanEntryType>("dinner");
-const pickerMenu = ref(false);
 
 const newMealdateString = computed(() => {
   // Format the date to YYYY-MM-DD in the same timezone as newMealdate
diff --git a/frontend/pages/household/mealplan/planner/edit.vue b/frontend/pages/household/mealplan/planner/edit.vue
index ca630c677..2a1b6a5e9 100644
--- a/frontend/pages/household/mealplan/planner/edit.vue
+++ b/frontend/pages/household/mealplan/planner/edit.vue
@@ -22,34 +22,17 @@
       "
       @close="resetDialog()"
     >
-      <v-card-text>
-        <v-menu
-          v-model="state.pickerMenu!"
-          :close-on-content-click="false"
-          transition="scale-transition"
-          offset-y
-          max-width="290px"
-          min-width="auto"
-        >
-          <template #activator="{ props }">
-            <v-text-field
-              :model-value="$d(newMeal.date)"
-              :label="$t('general.date')"
-              persistent-hint
-              :prepend-icon="$globals.icons.calendar"
-              v-bind="props"
-              readonly
-            />
-          </template>
-          <v-date-picker
-            v-model="newMeal.date"
-            hide-header
-            :first-day-of-week="firstDayOfWeek"
-            :local="$i18n.locale"
-            @update:model-value="state.pickerMenu = false"
-          />
-        </v-menu>
-        <v-card-text>
+      <v-card-text class="pb-2">
+        <v-date-picker
+          v-model="newMeal.date"
+          class="mx-auto"
+          hide-header
+          show-adjacent-months
+          color="primary"
+          :first-day-of-week="firstDayOfWeek"
+          :local="$i18n.locale"
+        />
+        <v-card-text class="pb-0">
           <v-select
             v-model="newMeal.entryType"
             :return-object="false"
@@ -76,8 +59,8 @@
             <v-textarea v-model="newMeal.text" rows="2" :label="$t('meal-plan.meal-note')" />
           </template>
         </v-card-text>
-        <v-card-actions class="my-0 py-0">
-          <v-switch v-model="dialog.note" class="mt-n3" :label="$t('meal-plan.note-only')" />
+        <v-card-actions class="py-0 px-4">
+          <v-switch v-model="dialog.note" class="mt-n3 mb-n4" :label="$t('meal-plan.note-only')" />
         </v-card-actions>
       </v-card-text>
     </BaseDialog>
@@ -261,7 +244,6 @@ export default defineNuxtComponent({
 
     const state = ref({
       dialog: false,
-      pickerMenu: null as null | boolean,
     });
 
     const firstDayOfWeek = computed(() => {