calendar วินัย

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

@@ -14,26 +14,28 @@ const props = defineProps({
 });
 </script>
 <template>
-    <q-dialog v-model="props.modal" persistent>
-      <q-card style="min-width: 60vw">
-        <q-toolbar>
-          <q-toolbar-title class="text-subtitle2 text-bold">ปฎิทิน</q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="props.close"
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-toolbar>
-        <q-separator />
-        <q-card-section class="q-pa-md bg-grey-1">
-         <Calendar/>
-        </q-card-section>
-        <!-- <q-separator /> -->
-  
-        <!-- <div class="row justify-end q-px-md q-py-sm items-center">
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 60vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold"
+          >ปฎิทิน</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.close"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <q-card-section class="q-pa-md bg-grey-1">
+        <Calendar />
+      </q-card-section>
+      <!-- <q-separator /> -->
+
+      <!-- <div class="row justify-end q-px-md q-py-sm items-center">
           <q-btn
             dense
             color="public"
@@ -47,6 +49,6 @@ const props = defineProps({
             <q-tooltip>{{ props.btnTitle }}</q-tooltip>
           </q-btn>
         </div> -->
-      </q-card>
-    </q-dialog>
-  </template>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -11,13 +11,14 @@ import listPlugin from "@fullcalendar/list";
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai } = mixin;
+const { monthYear2Thai, showLoader, hideLoader } = mixin;
 
 import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 
 /**
  * Option ของปฏิทิน
  */
+
 const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<CalendarOptions>({
   plugins: [
@@ -127,37 +128,33 @@ const modeCancel = ref(true);
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  if (fullCalendar !== undefined) {
-    const calen = fullCalendar.value.getApi();
-    const date = new Date(dateMonth.value.year, dateMonth.value.month);
-    calen.gotoDate(date);
-  }
+  showLoader();
+  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 เปลี่ยนปฎิทิน*/
 function changCalendar() {
   const calen = fullCalendar.value.getApi();
   const date = new Date(dateMonth.value.year, dateMonth.value.month);
   calen.gotoDate(date);
 }
 
-/**
- * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-// watch(props, async (count, prevCount) => {
-//   const calen = fullCalendar.value.getApi();
-//   const date = new Date(props.dateYear, props.dateMonth);
-//   calen.gotoDate(date);
-// });
-
 /**
  * ฟังก์ชั่นยกเลิก model
  * @param text
  */
-const cancel = async (text: string) => {
+async function cancel(text: string) {
   title.value = text;
   modalCancel.value = true;
   modeCancel.value = true;
-};
+}
 /**
  * ฟังก์ชั่นเปิด model
  * @param text
@@ -168,26 +165,6 @@ const view = async (text: string) => {
   modeCancel.value = false;
 };
 
-// filter calendar left
-const filterLists = ref<any[]>([
-  {
-    id: "x1",
-    name: "นางสาววารุณี แต้มคู",
-    color: "green",
-  },
-  {
-    id: "x2",
-    name: "นางสาวสมศรี ใจดี",
-    color: "grey",
-  },
-  {
-    id: "x3",
-    name: "นายสมชาย สุขใจ",
-    color: "grey",
-  },
-]);
-const filterVal = ref(["x1"]);
-
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),