จัดโค้ด

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

@@ -22,7 +22,9 @@ const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
   mixin;
 
 const $q = useQuasar();
-
+const modalCancel = ref(false);
+const title = ref("");
+const modeCancel = ref(true);
 const props = defineProps({
   lists: {
     type: Array as PropType<ExtendHistoryObject[]>,
@@ -99,7 +101,7 @@ async function fetchCalendar() {
       id: index.toString(),
       title: e.name,
       start: e.dateStart,
-      end: moment(e.dateEnd).format("YYYY-MM-DD")+ " 23:59:59",
+      end: moment(e.dateEnd).format("YYYY-MM-DD") + " 23:59:59",
       allDay: false,
       color:
         props.lists.length > 1 && index > 0
@@ -119,45 +121,6 @@ async function fetchCalendar() {
   }, 1000);
 }
 
-// async function fetchCalendar() {
-//   showLoader();
-//   await http
-//     .post(config.API.investigateCalendar(), {
-//       year: dateMonth.value.year,
-//       month: dateMonth.value.month,
-//     })
-//     .then((res) => {
-//       const data = res.data.result;
-//       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 = events;
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       setTimeout(() => {
-//         if (fullCalendar !== undefined) {
-//           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++) {
@@ -185,20 +148,6 @@ async function view(text: string) {
   modeCancel.value = false;
 }
 
-watch(
-  () => props.modal,
-  async () => {
-    props.modal && (await fetchCalendar());
-  }
-);
-
-/**
- * ตัวแปรทั้งหมด
- */
-const modalCancel = ref(false);
-const title = ref("");
-const modeCancel = ref(true);
-
 function gotoPrevMonth() {
   const calen = fullCalendar.value.getApi();
   calen.prev();
@@ -216,6 +165,13 @@ function updateDateMonth(date: Date) {
   dateMonth.value.month = date.getMonth();
   fetchCalendar();
 }
+
+watch(
+  () => props.modal,
+  async () => {
+    props.modal && (await fetchCalendar());
+  }
+);
 </script>
 
 <template>
@@ -243,40 +199,6 @@ function updateDateMonth(date: Date) {
             <div class="col-12">
               <div class="row q-gutter-sm q-pb-sm main-content">
                 <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"
-                        :locale="'th'"
-                        autoApply
-                        month-picker
-                        :enableTimePicker="false"
-                        @update:modelValue="changCalendar"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            :model-value="monthYearThai(dateMonth)"
-                            dense
-                            outlined
-                            style="width: 130px"
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                  </div> -->
                   <div class="row q-mb-sm justify-between">
                     <q-btn
                       size="12px"
@@ -292,7 +214,6 @@ function updateDateMonth(date: Date) {
                     <p class="q-ma-none text-center">
                       {{ monthYearThai(dateMonth) }}
                     </p>
-
                     <q-btn
                       size="12px"
                       dense
@@ -304,6 +225,7 @@ function updateDateMonth(date: Date) {
                       <q-tooltip>เดือนถัดไป</q-tooltip>
                     </q-btn>
                   </div>
+
                   <FullCalendar
                     ref="fullCalendar"
                     class="demo-app-calendar"
@@ -333,6 +255,7 @@ function updateDateMonth(date: Date) {
                       </div>
                     </template>
                   </FullCalendar>
+                  
                 </div>
               </div>
             </div>
@@ -377,13 +300,6 @@ function updateDateMonth(date: Date) {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* border: 2px solid #17a259; */
-  /* border-radius: 50%;
-  height: 25px;
-  width: 25px;
-  font-weight: bold;
-  color: white !important;
-  background: #17a259; */
 }
 
 .fc-day-today .fc-daygrid-day-frame {