From 4cb87897860d08f09ee5efed653ad872514336ad Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 26 Aug 2025 23:22:01 +0530
Subject: [PATCH] feat: integrate DateMonthYearPicker into Calendar for
 improved date selection

---
 frontend/components.d.ts                      |  1 +
 .../Calendar/CalendarEventPanel.vue           |  2 +-
 frontend/src/pages/Calendar.vue               | 67 ++++++++++++++++---
 3 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 7946766c..7612cb20 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -86,6 +86,7 @@ declare module 'vue' {
     DashboardItem: typeof import('./src/components/Dashboard/DashboardItem.vue')['default']
     DataFields: typeof import('./src/components/Activities/DataFields.vue')['default']
     DataFieldsModal: typeof import('./src/components/Modals/DataFieldsModal.vue')['default']
+    DateMonthYearPicker: typeof import('./src/components/Calendar/DateMonthYearPicker.vue')['default']
     DealModal: typeof import('./src/components/Modals/DealModal.vue')['default']
     DealsIcon: typeof import('./src/components/Icons/DealsIcon.vue')['default']
     DealsListView: typeof import('./src/components/ListViews/DealsListView.vue')['default']
diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index d716ab6a..e680a4d0 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -129,7 +129,7 @@
             @click="showAllParticipants = true"
           />
           <Button
-            v-else
+            v-else-if="showAllParticipants"
             variant="ghost"
             :label="__('Show less')"
             iconLeft="chevron-up"
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index afa2590e..1dadfeef 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -40,33 +40,51 @@
     >
       <template
         #header="{
-          currentMonthYear,
+          currentYear,
+          currentMonth,
           enabledModes,
           activeView,
           decrement,
           increment,
           updateActiveView,
+          setCalendarDate,
         }"
       >
         <div class="my-4 mx-5 flex justify-between">
           <!-- left side  -->
-          <!-- Year, Month -->
-          <span class="text-lg font-medium text-ink-gray-8">
-            {{ currentMonthYear }}
-          </span>
+          <!-- Month Year -->
+          <div class="flex items-center">
+            <DateMonthYearPicker
+              :modelValue="selectedMonthDate"
+              :formatter="(d) => dayjs(d).format('MMM YYYY')"
+              @update:modelValue="
+                (val) => onMonthYearChange(val, setCalendarDate)
+              "
+            />
+          </div>
           <!-- right side -->
           <!-- actions buttons for calendar -->
           <div class="flex gap-x-1">
-            <!-- Increment and Decrement Button-->
+            <!-- Increment and Decrement Button -->
 
             <Button
-              @click="decrement()"
+              @click="
+                () => {
+                  decrement()
+                  syncSelectedMonth(currentYear, currentMonth)
+                }
+              "
               variant="ghost"
               class="h-4 w-4"
               icon="chevron-left"
             />
             <Button
-              @click="increment()"
+              @click="
+                () => {
+                  increment()
+                  syncSelectedMonth(currentYear, currentMonth)
+                }
+              "
               variant="ghost"
               class="h-4 w-4"
               icon="chevron-right"
@@ -118,6 +136,7 @@ import {
   CalendarActiveEvent as activeEvent,
   call,
 } from 'frappe-ui'
+import DateMonthYearPicker from '@/components/Calendar/DateMonthYearPicker.vue'
 import { onMounted, ref } from 'vue'
 
 const { user } = sessionStore()
@@ -125,6 +144,37 @@ const { $dialog } = globalStore()
 
 const calendar = ref(null)
 
+const selectedMonthDate = ref(dayjs().format('YYYY-MM-DD'))
+
+function onMonthYearChange(val = '', setCalendarDate) {
+  const d = dayjs(val)
+  selectedMonthDate.value = d.format('YYYY-MM-DD')
+
+  if (setCalendarDate) {
+    setCalendarDate(selectedMonthDate.value)
+  } else if (calendar.value?.setCalendarDate) {
+    calendar.value.setCalendarDate(selectedMonthDate.value)
+  }
+}
+
+function syncSelectedMonth(year, month) {
+  // Keep same day if possible; otherwise clamp to last day
+  if (typeof year === 'number' && typeof month === 'number') {
+    const currentDay = dayjs(selectedMonthDate.value).date()
+
+    let tentative = dayjs(
+      `${year}-${String(month + 1).padStart(2, '0')}-01`,
+    ).date(currentDay)
+
+    if (tentative.month() !== month) {
+      // overflowed into next month, use last day of target month
+      tentative = tentative.startOf('month').month(month).endOf('month')
+    }
+
+    selectedMonthDate.value = tentative.format('YYYY-MM-DD')
+  }
+}
+
 const events = createListResource({
   doctype: 'Event',
   cache: ['calendar', user],
@@ -411,7 +461,6 @@ function getFromToTime(time) {
   return [fromTime, toTime]
 }
 
-// Helper: create Contact docs for participants missing reference_docname
 async function ensureParticipantContacts(participants) {
   if (!Array.isArray(participants) || !participants.length) return participants
   const updated = []