Change CalendarPicker pop up

src/components/GanttChart/CalendarPicker.vue

@@ -66,15 +66,55 @@ const toggleDatePicker = () => {
 
 </script>
 
+
+
 <template>
     <v-container>
         <v-row justify="center">
             <v-date-picker v-model="selectedDate" max="2025-12-31" min="2024-01-01" color="#96A9DB"
-                @update:modelValue="updateSelectedDate">
+                class="custom-date-picker" @update:modelValue="updateSelectedDate">
             </v-date-picker>
         </v-row>
     </v-container>
 </template>
 
+<style scoped>
+/* ✅ ปรับขนาด v-date-picker */
+.custom-date-picker {
+    width: 350px !important;
+    /* ✅ ลดความกว้าง */
+    height: 390px !important;
+    max-width: 350px;
+    font-size: 14px !important;
+    /* ✅ ลดขนาดตัวอักษร */
+    border-radius: 20px !important;
+    /* ✅ ทำให้ขอบโค้งมน */
+}
+
+/* ✅ ลดขนาดของตัวอักษรวันที่ (Mon, Jan 1) */
+:deep(.v-date-picker-title) {
+    font-size: 14px !important;
+}
+
+/* ✅ ปรับขนาดปุ่มวันที่ */
+:deep(.v-date-picker .v-btn) {
+    min-width: 32px !important;
+    /* ✅ ลดความกว้างของปุ่ม */
+    height: 32px !important;
+    /* ✅ ลดความสูงของปุ่ม */
+    font-size: 15px !important;
+    /* ✅ ลดขนาดตัวเลขในปฏิทิน */
+    border-radius: 60px !important;
+    /* ✅ ทำให้ปุ่มโค้งมน */
+}
 
-<style scoped></style>
\ No newline at end of file
+/* ✅ ปรับขนาดชื่อเดือน-ปี */
+:deep(.v-date-picker-header) {
+    font-size: 16px !important;
+}
+
+/* ✅ ปรับขนาดตัวอักษรชื่อวันในสัปดาห์ (S, M, T, W, T, F, S) */
+:deep(.v-date-picker .v-date-picker-weekdays) {
+    font-size: 12px !important;
+}
+</style>

src/components/GanttChart/GanttCalendar.vue

@@ -70,36 +70,38 @@ const closeCalendarDialog = () => {
         Next >
       </v-btn>
 
-      <!-- ปุ่ม "..." เปิดปฏิทิน -->
-      <v-btn class="ml-2" style="background-color: white; color: black; border-radius: 10px;" @click="openCalendar">
+      <!-- ✅ เปลี่ยนจาก v-dialog เป็น v-menu (Popover) -->
+      <v-menu v-model="showCalendar" :close-on-content-click="false" location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" class="ml-2 popover-btn">
             <v-icon>mdi-dots-horizontal</v-icon>
           </v-btn>
+        </template>
 
-      <!-- Dialog ใช้ attach="body" ให้ทำงานได้ดีขึ้น -->
-      <v-dialog v-model="showCalendar" max-width="380px" persistent attach="body">
-        <v-container>
-          <CalendarPicker v-model="selectedDate" @update:modelValue="(val) => closeCalendarDialog(val)" />
-        </v-container>
-      </v-dialog>
-
+        <!-- ✅ ปรับขนาด Popover และใช้ CalendarPicker -->
+        <v-card class="pb-12 popover-card">
+          <CalendarPicker v-model="selectedDate" @update:modelValue="closeCalendarDialog" />
+        </v-card>
+      </v-menu>
 
     </v-col>
   </v-container>
 </template>
 
-
 <style scoped>
-/* ✅ ปรับสีของปฏิทิน */
-.calendar-popup {
-  background-color: #e51616 !important;
-  /* เปลี่ยนเป็นสีเทาเข้ม */
-  border-radius: 12px;
+/* ✅ ปรับแต่งปุ่ม "..." */
+.popover-btn {
+  background-color: white;
+  color: black;
+  border-radius: 10px;
 }
 
-/* ✅ ปรับสีตัวอักษรของปฏิทิน */
-.custom-date-picker {
-  width: 100%;
-  color: white !important;
-  /* เปลี่ยนสีตัวอักษรเป็นสีขาว */
+/* ✅ ปรับแต่งขนาดและขอบโค้งของ Popover */
+.popover-card {
+  border-radius: 25px !important;
+  /* ✅ กำหนดขอบโค้ง */
+
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  background-color: white;
 }
 </style>