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

src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue

@@ -72,24 +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.disciplinaryCalendar(), {
       year: dateMonth.value.year,
-      mounth: dateMonth.value.month,
+      month: dateMonth.value.month,
     })
     .then((res) => {
       const data = res.data.result;
-      const event = data.map((e: CaledarDisciplinary) => ({
+      const defaultColor = "#02A998";
+      const gradientColors = generateGradientColors(data.length);
+
+      const events = data.map((e: CaledarDisciplinary, index: number) => ({
         id: e.id,
         title: e.title,
-        start: e.disciplinaryDateStart,
-        end: e.disciplinaryDateEnd,
+        start: e.disciplinaryDateEnd,
+        end: e.disciplinaryDateStart,
         allDay: true,
+        color:
+          data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
       }));
 
-      calendarOptions.value.events = event;
+      calendarOptions.value.events = events;
     })
     .catch((err) => {
       messageError($q, err);
@@ -97,15 +111,23 @@ async function fetchCalendar() {
     .finally(() => {
       setTimeout(() => {
         if (fullCalendar !== undefined) {
-        const calen = fullCalendar.value.getApi();
-        const date = new Date(dateMonth.value.year, dateMonth.value.month);
-        calen.gotoDate(date);
+          const calen = fullCalendar.value.getApi();
+          const date = new Date(dateMonth.value.year, dateMonth.value.month);
+          calen.gotoDate(date);
         }
         hideLoader();
       }, 1000);
     });
 }
 
+function generateGradientColors(length: number) {
+  const colors = [];
+  for (let i = 0; i < length; i++) {
+    colors.push(getRandomColor());
+  }
+  return colors;
+}
+
 /** function เปลี่ยนปฎิทิน*/
 function changCalendar() {
   fetchCalendar();
@@ -148,6 +170,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">
@@ -173,7 +215,7 @@ const modeCancel = ref(true);
             <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="row col-12 q-mb-sm">
                     <div class="col-xs-12 col-sm-3 col-md-2">
                       <datepicker
                         v-model="dateMonth"
@@ -206,6 +248,29 @@ 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"