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