update ปฎิทิน

src/modules/05_leave/componenst/Calendar.vue

@@ -80,7 +80,7 @@
 	</q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, watch, onMounted } from "vue"
 import FullCalendar from "@fullcalendar/vue3"
 import dayGridPlugin from "@fullcalendar/daygrid"
 import type { CalendarOptions } from "@fullcalendar/core"
@@ -88,7 +88,7 @@ import timeGridPlugin from "@fullcalendar/timegrid"
 import interactionPlugin from "@fullcalendar/interaction"
 import allLocales from "@fullcalendar/core/locales-all"
 import listPlugin from "@fullcalendar/list"
-const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
+const fullCalendar = ref<any>() //ref calendar
 const calendarOptions = ref<CalendarOptions>({
 	plugins: [
 		dayGridPlugin,
@@ -140,7 +140,45 @@ const phone = ref("000-00000000")
 const reason = ref("ยกเลิกการลา")
 const model = ref(null)
 const modeCancel = ref(true)
+const props = defineProps({
+	dateYear: {
+		//filter ปี วันหยุด
+		type: Number,
+		default: () => new Date().getFullYear(),
+	},
+	dateMonth: {
+		//filter เดือน วันหยุด
+		type: Number,
+		default: () => new Date().getMonth(),
+	},
+	refreshData: {
+		//หน้า main มีการอัพเดทค่าให้ refresh data
+		type: Boolean,
+		required: true,
+	},
+	fetchDataSummaryCalendar: {
+		//ฟังก์ชันอัพเดทสรุปวันหยุด
+		type: Function,
+		default: () => console.log("not function"),
+	},
+})
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+	if (fullCalendar !== undefined) {
+		const calen = fullCalendar.value.getApi()
+		const date = new Date(props.dateYear, props.dateMonth)
+		calen.gotoDate(date)
+	}
+})
 
+/**
+ * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+	const date = new Date(props.dateYear, props.dateMonth)
+})
 const cancel = async (text: string) => {
 	title.value = text
 	modalCancel.value = true

src/modules/05_leave/views/Main.vue

@@ -13,11 +13,11 @@
 						<div class="row col-12">
 							<div class="row items-center">
 								<!-- filter เลือกเดือนปี -->
-								<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" v-if="currentTab === 'calendar'">
+								<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" v-if="currentTab === 'calendar'" @update:modelValue="updateMonth">
 									<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 hide-bottom-space style="width: 130px">
+										<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>
@@ -179,8 +179,17 @@ const dateMonth = ref<DataDateMonthObject>({
 	month: new Date().getMonth(),
 	year: new Date().getFullYear(),
 })
+console.log(dateMonth.value)
+const props = defineProps({
+	dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
+	fetchDataSummaryCalendar: {
+		//ฟังก์ชันอัพเดทสรุปวันหยุด
+		type: Function,
+		default: () => console.log("not function"),
+	},
+})
 const dateYear = ref<number>(new Date().getFullYear())
-
+const emit = defineEmits(["update:dateYear"])
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { monthYear2Thai } = mixin
 /**
@@ -192,6 +201,16 @@ const monthYearThai = (val: DataDateMonthObject) => {
 	else return monthYear2Thai(val.month, val.year)
 }
 
+const updateMonth = async (e: DataDateMonthObject) => {
+	console.log(dateMonth.value)
+	if (e != null) {
+		dateYear.value = e.year
+		emit("update:dateYear", e.year)
+		await props.fetchDataSummaryCalendar()
+	}
+	console.log(dateMonth.value)
+}
+
 const value = ref(90)
 const itemPie = ref([
 	{ text: "ลาป่วย", color: "text-pink-5", value: 90, all: "10", use: "9", remain: "1" },