From 3b8b077a80560d009f7ab707363a11b35736a8a9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 6 Dec 2023 14:56:09 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B8=81=20API=20=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2=20calendar=20=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=AA=E0=B8=B7=E0=B8=9A=E0=B8=AA=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=AA=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2_InvestigateFacts/CalandarDialog.vue     | 470 ++++++++++++++++-
 .../2_InvestigateFacts/Calendar.vue           |   2 +-
 .../CalandarDialog.vue                        | 480 +++++++++++++++++-
 .../11_discipline/interface/response/Main.ts  |  14 +-
 .../interface/response/investigate.ts         |   1 +
 5 files changed, 945 insertions(+), 22 deletions(-)

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue b/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
index 59df5232c..4e7b2d407 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
@@ -1,6 +1,26 @@
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
-import Calendar from "@/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue";
+import { ref, watch } from "vue";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { useQuasar } from "quasar";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import type { CalendarOptions } from "@fullcalendar/core";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
+import type { CaledarInvestigatefacts } from "@/modules/11_discipline/interface/response/Main";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
+  mixin;
+
+const $q = useQuasar();
 
 const props = defineProps({
   modal: {
@@ -12,6 +32,125 @@ const props = defineProps({
     default: true,
   },
 });
+
+const fullCalendar = ref<any>(); //ref calendar
+const calendarOptions = ref<CalendarOptions>({
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, // needed for dateClick
+    listPlugin,
+  ],
+  buttonText: {
+    listYear: "รายการ",
+    dayGridMonth: "ปฏิทิน",
+    test: "เพิ่มวันหยุด",
+  },
+  headerToolbar: false,
+  initialView: "dayGridMonth",
+  initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+  selectable: true,
+  dayMaxEvents: true,
+  weekends: true,
+  locale: "th",
+  locales: allLocales,
+  expandRows: true,
+  nowIndicator: true,
+  height: "100%",
+  eventColor: "#50a5fc",
+  eventTextColor: "#fff",
+  eventBorderColor: "#50a5fc",
+  displayEventTime: false,
+  editable: true,
+  events: [],
+});
+
+/** ตัวแปร filter*/
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+/** function เรียกข่อมูล calendar*/
+async function fetchCalendar() {
+  showLoader();
+  await http
+    .post(config.API.investigateCalendar(), {
+      year: dateMonth.value.year,
+      mounth: dateMonth.value.month,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      const event = data.map((e: CaledarInvestigatefacts) => ({
+        id: e.id,
+        title: e.title,
+        start: e.investigationDateStart,
+        end: e.investigationDateEnd,
+        allDay: true,
+      }));
+      calendarOptions.value.events = event;
+    })
+    .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 เปลี่ยนปฎิทิน*/
+function changCalendar() {
+  fetchCalendar();
+}
+
+/**
+ * function convert เดือนปี
+ * @param val เดือนปี
+ */
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
+/**
+ * function openModalDetail
+ * @param text เรื่อง
+ */
+async function view(text: string) {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = false;
+}
+
+watch(
+  () => props.modal,
+  async () => {
+    props.modal && (await fetchCalendar());
+  }
+);
+
+/**
+ * ตัวแปรทั้งหมด
+ */
+const modalCancel = ref(false);
+const title = ref("");
+const location = ref("บ้าน");
+const subject = ref("ลาป่วย");
+const dateStart = ref("20 ส.ค. 2566");
+const dateEnd = ref("21 ส.ค. 2566");
+const numDate = ref("20");
+const place = ref("บ้าน");
+const phone = ref("000-00000000");
+const reason = ref("ยกเลิกการลา");
+const model = ref(null);
+const modeCancel = ref(true);
 </script>
 <template>
   <q-dialog v-model="props.modal">
@@ -32,8 +171,333 @@ const props = defineProps({
 
       <q-separator />
       <q-card-section class="q-pa-md bg-grey-1 scroll">
-        <Calendar />
+        <div class="q-ma-sm">
+          <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="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>
+                  <FullCalendar
+                    ref="fullCalendar"
+                    class="demo-app-calendar"
+                    :options="calendarOptions"
+                  >
+                    <template v-slot:eventContent="arg">
+                      <div
+                        class="row col-12 items-center no-wrap"
+                        :style="`background: + ${arg.event.color}`"
+                      >
+                        <!-- <b>{{ arg.timeText }}</b> -->
+                        <div
+                          class="textHover col-10"
+                          @click="view(arg.event.title)"
+                        >
+                          {{ arg.event.title }}
+                        </div>
+                        <!-- <q-btn
+                          dense
+                          v-if="arg.event.groupId == 1"
+                          icon="mdi-close"
+                          flat
+                          round
+                          size="8px"
+                          @click="cancel(arg.event.title)"
+                        /> -->
+                      </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>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <!-- modal ขอยกเลิก/ดูรายละเอียด -->
+  <q-dialog v-model="modalCancel" persistent>
+    <q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
+      <q-card-section class="row items-center q-pa-sm">
+        <div v-if="modeCancel == false" class="text-bold q-pl-sm">
+          รายละเอียดของ{{ title }}
+        </div>
+        <div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-p-md row q-gutter-y-md">
+        <div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
+          <div class="col-12 q-col-gutter-sm row items-center">
+            <div class="col-6 text-grey-7">เขียนที่</div>
+            <div class="col-6 text-black">{{ location }}</div>
+            <div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
+            <div class="col-6 text-black">{{ subject }}</div>
+            <div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
+            <div class="col-6 text-black">{{ dateStart }}</div>
+            <div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
+            <div class="col-6 text-black">{{ dateEnd }}</div>
+            <div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
+            <div class="col-6 text-black">{{ numDate }}</div>
+            <div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
+            <div class="col-6 text-black">{{ place }}</div>
+            <div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
+            <div class="col-6 text-black">{{ phone }}</div>
+          </div>
+        </div>
+        <div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
+          <q-input
+            v-model="reason"
+            type="textarea"
+            label="กรอกเหตุผล"
+            outlined
+            dense
+          />
+          <q-file
+            outlined
+            v-model="model"
+            label="เลือกไฟล์เอกสารหลักฐาน"
+            class="q-mt-md"
+            use-chips
+            dense
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+          </q-file>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section
+        class="row items-center q-pa-sm"
+        v-if="modeCancel == true"
+      >
+        <q-space />
+        <q-btn
+          label="ยืนยัน"
+          unelevated
+          color="secondary"
+          dense
+          class="q-px-md"
+          v-close-popup
+        />
       </q-card-section>
     </q-card>
   </q-dialog>
 </template>
+<style scope lang="scss">
+.main-content {
+  height: 65vh;
+}
+
+.color-main {
+  color: #18a259;
+}
+
+.padding-content {
+  padding: 10px;
+}
+
+.demo-app-main {
+  flex-grow: 1;
+  /* padding: 3em; */
+}
+
+.fc {
+  /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.fc-day-today {
+  background-color: #f8f8f8 !important;
+}
+
+.fc-day-today .fc-daygrid-day-number {
+  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 {
+  padding: 5%;
+}
+
+.fc .fc-button-group > .fc-button {
+  color: black;
+  background-color: #fafafa;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button:active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button.fc-button-active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc-header-toolbar {
+  background-color: white;
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px 10px 0px 0px;
+}
+
+.fc .fc-scrollgrid-liquid > thead {
+  background-color: white;
+}
+
+.dp-custom-cell {
+  border-radius: 50%;
+}
+
+.dp__today {
+  border: 1px solid var(--q-primary);
+}
+
+.dp__range_end,
+.dp__range_start,
+.dp__active_date {
+  background: var(--q-primary);
+  color: var(--dp-primary-text-color);
+}
+
+.datepicker .q-field__label {
+  padding-left: 5px;
+}
+
+.datepicker .q-field__messages {
+  padding-left: 20px;
+}
+
+.datepicker .q-field__native {
+  padding-left: 5px;
+  color: var(--q-primary) !important;
+}
+
+.datepicker .q-field__prepend {
+  padding-left: 6px;
+}
+
+.datepicker .q-field__append {
+  padding-right: 6px;
+}
+
+.datepicker .q-field__after {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.fc .fc-popover {
+  z-index: 6000;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  cursor: pointer;
+}
+
+.subName {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.subInput {
+  display: flex;
+  align-items: center;
+}
+
+.fc-event {
+  overflow: hidden;
+  border-color: transparent !important;
+  font-weight: 500;
+}
+
+.fc-event-main {
+  text-align: left;
+  padding: 0px 5px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 0px;
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border: 1px solid #ebe9f1;
+}
+
+.textHover:hover {
+  color: #1d18a2;
+}
+</style>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue
index a061b9dd9..a0b593deb 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue
@@ -22,7 +22,7 @@ const $q = useQuasar();
 /**
  * Option ของปฏิทิน
  */
-
+const loadCalendar = ref<boolean>(false);
 const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<CalendarOptions>({
   plugins: [
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
index 0666fd8fe..869879430 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
@@ -1,6 +1,25 @@
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
-import Calendar from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue";
+import { ref, watch } from "vue";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { useQuasar } from "quasar";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import type { CalendarOptions } from "@fullcalendar/core";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
+import type { CaledarDisciplinary } from "@/modules/11_discipline/interface/response/Main";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;
+
+const $q = useQuasar();
 
 const props = defineProps({
   modal: {
@@ -12,9 +31,126 @@ const props = defineProps({
     default: true,
   },
 });
+
+/** Option ของปฏิทิน */
+const fullCalendar = ref<any>(); //ref calendar
+const calendarOptions = ref<CalendarOptions>({
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, // needed for dateClick
+    listPlugin,
+  ],
+  buttonText: {
+    listYear: "รายการ",
+    dayGridMonth: "ปฏิทิน",
+    test: "เพิ่มวันหยุด",
+  },
+  headerToolbar: false,
+  initialView: "dayGridMonth",
+  initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+  selectable: true,
+  dayMaxEvents: true,
+  weekends: true,
+  locale: "th",
+  locales: allLocales,
+  expandRows: true,
+  nowIndicator: true,
+  height: "100%",
+  eventColor: "#50a5fc",
+  eventTextColor: "#fff",
+  eventBorderColor: "#50a5fc",
+  displayEventTime: false,
+  editable: true,
+  events: [],
+});
+
+/** ตัวแปร filter*/
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+/** function เรียกข่อมูล calendar*/
+async function fetchCalendar() {
+  showLoader();
+  await http
+    .post(config.API.disciplinaryCalendar(), {
+      year: dateMonth.value.year,
+      mounth: dateMonth.value.month,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      const event = data.map((e: CaledarDisciplinary) => ({
+        id: e.id,
+        title: e.title,
+        start: e.disciplinaryDateStart,
+        end: e.disciplinaryDateEnd,
+        allDay: true,
+      }));
+
+      calendarOptions.value.events = event;
+    })
+    .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 เปลี่ยนปฎิทิน*/
+function changCalendar() {
+  fetchCalendar();
+}
+
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+
+/**
+ * ฟังก์ชั่นเปิด model
+ * @param text
+ */
+const view = async (text: string) => {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = false;
+};
+
+watch(
+  () => props.modal,
+  async () => {
+    props.modal && (await fetchCalendar());
+  }
+);
+
+/**
+ * ตัวแปรทั้งหมด
+ */
+const modalCancel = ref(false);
+const title = ref("");
+const location = ref("บ้าน");
+const subject = ref("ลาป่วย");
+const dateStart = ref("20 ส.ค. 2566");
+const dateEnd = ref("21 ส.ค. 2566");
+const numDate = ref("20");
+const place = ref("บ้าน");
+const phone = ref("000-00000000");
+const reason = ref("ยกเลิกการลา");
+const model = ref(null);
+const modeCancel = ref(true);
 </script>
 <template>
-  <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="props.modal">
     <q-card style="min-width: 60vw">
       <q-toolbar>
         <q-toolbar-title class="text-subtitle2 text-bold"
@@ -29,26 +165,336 @@ const props = defineProps({
           style="color: #ff8080; background-color: #ffdede"
         />
       </q-toolbar>
+
       <q-separator />
       <q-card-section class="q-pa-md bg-grey-1 scroll">
-        <Calendar />
+        <div class="q-ma-sm">
+          <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="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>
+                  <FullCalendar
+                    ref="fullCalendar"
+                    class="demo-app-calendar"
+                    :options="calendarOptions"
+                  >
+                    <template v-slot:eventContent="arg">
+                      <div
+                        class="row col-12 items-center no-wrap"
+                        :style="`background: + ${arg.event.color}`"
+                      >
+                        <!-- <b>{{ arg.timeText }}</b> -->
+                        <div
+                          class="textHover col-10"
+                          @click="view(arg.event.title)"
+                        >
+                          {{ arg.event.title }}
+                        </div>
+                        <!-- <q-btn
+                          dense
+                          v-if="arg.event.groupId == 1"
+                          icon="mdi-close"
+                          flat
+                          round
+                          size="8px"
+                          @click="cancel(arg.event.title)"
+                        /> -->
+                      </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>
+          </div>
+        </div>
       </q-card-section>
-      <!-- <q-separator /> -->
+    </q-card>
+  </q-dialog>
 
-      <!-- <div class="row justify-end q-px-md q-py-sm items-center">
-          <q-btn
+  <!-- modal ขอยกเลิก/ดูรายละเอียด -->
+  <q-dialog v-model="modalCancel" persistent>
+    <q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
+      <q-card-section class="row items-center q-pa-sm">
+        <div v-if="modeCancel == false" class="text-bold q-pl-sm">
+          รายละเอียดของ{{ title }}
+        </div>
+        <div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-p-md row q-gutter-y-md">
+        <div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
+          <div class="col-12 q-col-gutter-sm row items-center">
+            <div class="col-6 text-grey-7">เขียนที่</div>
+            <div class="col-6 text-black">{{ location }}</div>
+            <div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
+            <div class="col-6 text-black">{{ subject }}</div>
+            <div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
+            <div class="col-6 text-black">{{ dateStart }}</div>
+            <div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
+            <div class="col-6 text-black">{{ dateEnd }}</div>
+            <div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
+            <div class="col-6 text-black">{{ numDate }}</div>
+            <div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
+            <div class="col-6 text-black">{{ place }}</div>
+            <div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
+            <div class="col-6 text-black">{{ phone }}</div>
+          </div>
+        </div>
+        <div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
+          <q-input
+            v-model="reason"
+            type="textarea"
+            label="กรอกเหตุผล"
+            outlined
+            dense
+          />
+          <q-file
+            outlined
+            v-model="model"
+            label="เลือกไฟล์เอกสารหลักฐาน"
+            class="q-mt-md"
+            use-chips
             dense
-            color="public"
-            id="onSubmit"
-            class="q-px-md q-py-xs"
-            @click="savePost"
           >
-
-            <div>{{ props.btnTitle }}</div>
-
-            <q-tooltip>{{ props.btnTitle }}</q-tooltip>
-          </q-btn>
-        </div> -->
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+          </q-file>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section
+        class="row items-center q-pa-sm"
+        v-if="modeCancel == true"
+      >
+        <q-space />
+        <q-btn
+          label="ยืนยัน"
+          unelevated
+          color="secondary"
+          dense
+          class="q-px-md"
+          v-close-popup
+        />
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>
+<style scope lang="scss">
+.main-content {
+  height: 65vh;
+}
+
+.color-main {
+  color: #18a259;
+}
+
+.padding-content {
+  padding: 10px;
+}
+
+.demo-app-main {
+  flex-grow: 1;
+  /* padding: 3em; */
+}
+
+.fc {
+  /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.fc-day-today {
+  background-color: #f8f8f8 !important;
+}
+
+.fc-day-today .fc-daygrid-day-number {
+  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 {
+  padding: 5%;
+}
+
+.fc .fc-button-group > .fc-button {
+  color: black;
+  background-color: #fafafa;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button:active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button.fc-button-active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc-header-toolbar {
+  background-color: white;
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px 10px 0px 0px;
+}
+
+.fc .fc-scrollgrid-liquid > thead {
+  background-color: white;
+}
+
+.dp-custom-cell {
+  border-radius: 50%;
+}
+
+.dp__today {
+  border: 1px solid var(--q-primary);
+}
+
+.dp__range_end,
+.dp__range_start,
+.dp__active_date {
+  background: var(--q-primary);
+  color: var(--dp-primary-text-color);
+}
+
+.datepicker .q-field__label {
+  padding-left: 5px;
+}
+
+.datepicker .q-field__messages {
+  padding-left: 20px;
+}
+
+.datepicker .q-field__native {
+  padding-left: 5px;
+  color: var(--q-primary) !important;
+}
+
+.datepicker .q-field__prepend {
+  padding-left: 6px;
+}
+
+.datepicker .q-field__append {
+  padding-right: 6px;
+}
+
+.datepicker .q-field__after {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.fc .fc-popover {
+  z-index: 6000;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  cursor: pointer;
+}
+
+.subName {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.subInput {
+  display: flex;
+  align-items: center;
+}
+
+.fc-event {
+  overflow: hidden;
+  border-color: transparent !important;
+  font-weight: 500;
+}
+
+.fc-event-main {
+  text-align: left;
+  padding: 0px 5px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 0px;
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border: 1px solid #ebe9f1;
+}
+
+.textHover:hover {
+  color: #1d18a2;
+}
+</style>
diff --git a/src/modules/11_discipline/interface/response/Main.ts b/src/modules/11_discipline/interface/response/Main.ts
index 10683a468..37ebe3441 100644
--- a/src/modules/11_discipline/interface/response/Main.ts
+++ b/src/modules/11_discipline/interface/response/Main.ts
@@ -2,5 +2,17 @@ interface DataOptionRes {
   organizationId: string;
   organizationName: string;
 }
+interface CaledarInvestigatefacts {
+  id: string;
+  title: string;
+  investigationDateStart: Date;
+  investigationDateEnd: Date;
+}
+interface CaledarDisciplinary {
+  id: string;
+  title: string;
+  disciplinaryDateEnd: Date;
+  disciplinaryDateStart: Date;
+}
 
-export type { DataOptionRes };
+export type { DataOptionRes, CaledarInvestigatefacts, CaledarDisciplinary };
diff --git a/src/modules/11_discipline/interface/response/investigate.ts b/src/modules/11_discipline/interface/response/investigate.ts
index 609bd27b9..2d69dc5c7 100644
--- a/src/modules/11_discipline/interface/response/investigate.ts
+++ b/src/modules/11_discipline/interface/response/investigate.ts
@@ -44,4 +44,5 @@ interface ocListType {
   organizationId: string;
   organizationName: string;
 }
+
 export type { ListData, ArrayPerson, ocListType, ArrayPersonAdd };