ย้าย ปฏิทิน เข้าใน ฟอร์ม

src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue

@@ -57,7 +57,7 @@ const calendarOptions = ref<CalendarOptions>({
   expandRows: true,
   nowIndicator: true,
   height: "100%",
-  eventColor: "#50a5fc",
+  eventColor: "#02A998",
   eventTextColor: "#fff",
   eventBorderColor: "#50a5fc",
   displayEventTime: false,
@@ -72,23 +72,38 @@ const dateMonth = ref<DataDateMonthObject>({
 });
 
 /** function เรียกข่อมูล calendar*/
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
 async function fetchCalendar() {
   showLoader();
   await http
     .post(config.API.investigateCalendar(), {
       year: dateMonth.value.year,
-      mounth: dateMonth.value.month,
+      month: dateMonth.value.month,
     })
     .then((res) => {
       const data = res.data.result;
-      const event = data.map((e: CaledarInvestigatefacts) => ({
+      const defaultColor = "#02A998";
+      const gradientColors = generateGradientColors(data.length);
+
+      const events = data.map((e: CaledarInvestigatefacts, index: number) => ({
         id: e.id,
         title: e.title,
         start: e.investigationDateStart,
         end: e.investigationDateEnd,
         allDay: true,
+        color:
+          data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
       }));
-      calendarOptions.value.events = event;
+
+      calendarOptions.value.events = events;
     })
     .catch((err) => {
       messageError($q, err);
@@ -105,6 +120,14 @@ async function fetchCalendar() {
     });
 }
 
+function generateGradientColors(length: number) {
+  const colors = [];
+  for (let i = 0; i < length; i++) {
+    colors.push(getRandomColor());
+  }
+  return colors;
+}
+
 /** function เปลี่ยนปฎิทิน*/
 function changCalendar() {
   fetchCalendar();
@@ -151,6 +174,26 @@ const phone = ref("000-00000000");
 const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
+
+function gotoPrevMonth() {
+  const calen = fullCalendar.value.getApi();
+  calen.prev();
+  console.log("b", calen.getDate());
+  updateDateMonth(calen.getDate());
+}
+
+function gotoNextMonth() {
+  const calen = fullCalendar.value.getApi();
+  calen.next();
+  console.log("n", calen.getDate());
+  updateDateMonth(calen.getDate());
+}
+
+function updateDateMonth(date: Date) {
+  dateMonth.value.year = date.getFullYear();
+  dateMonth.value.month = date.getMonth();
+  fetchCalendar();
+}
 </script>
 <template>
   <q-dialog v-model="props.modal">
@@ -175,8 +218,8 @@ const modeCancel = ref(true);
           <div class="row q-gutter-sm">
             <div class="col-12">
               <div class="row q-gutter-sm q-pb-sm main-content">
-                <div class="demo-app-main">
-                  <div class="row col-12 q-mb-sm">
+                <div class="demo-app-main q-mb-xl">
+                  <!-- <div class="row col-12 q-mb-sm">
                     <div class="col-xs-12 col-sm-3 col-md-2">
                       <datepicker
                         v-model="dateMonth"
@@ -209,6 +252,33 @@ const modeCancel = ref(true);
                         </template>
                       </datepicker>
                     </div>
+                  </div> -->
+                  <div class="row q-mb-sm justify-between">
+
+                      <q-btn
+                        size="12px"
+                        dense
+                        icon="mdi-chevron-left"
+                        class="self-center items-center"
+                        color="primary"
+                        @click="gotoPrevMonth"
+                      ></q-btn>
+       
+
+                      <p class="q-ma-none text-center">
+                        {{ monthYearThai(dateMonth) }}
+                      </p>
+     
+  
+                      <q-btn
+                        size="12px"
+                        dense
+                        icon="mdi-chevron-right"
+                        class="self-center items-center"
+                        color="primary"
+                        @click="gotoNextMonth"
+                      ></q-btn>
+
                   </div>
                   <FullCalendar
                     ref="fullCalendar"
@@ -239,17 +309,6 @@ const modeCancel = ref(true);
                       </div>
                     </template>
                   </FullCalendar>
-                  <div class="row q-col-gutter-lg justify-end q-pb-lg">
-                    <div class="items-center row">
-                      <q-icon
-                        size="10px"
-                        color="light-blue-14"
-                        name="mdi-circle"
-                        class="q-mr-sm"
-                      />
-                      <span class="text-caption text-grey-8">สืบสวน</span>
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>
@@ -352,6 +411,7 @@ const modeCancel = ref(true);
 
 .demo-app-main {
   flex-grow: 1;
+
   /* padding: 3em; */
 }