diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue
index da2a12f81..cd1021de5 100644
--- a/src/modules/09_leave/components/2_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@@ -83,7 +83,7 @@ async function fetchDataCalendar(type: string) {
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
     })
-    .then((res) => {
+    .then(async (res) => {
       mainData.value = res.data.result;
       const double_name = [
         ...new Set(mainData.value.map((item: ResCalendar) => item.keycloakId)),
@@ -116,6 +116,7 @@ async function fetchDataCalendar(type: string) {
       });
       const allEventData = [].concat(...eventData);
       calendarOptions.value.events = allEventData;
+      await fetchDataHoliday(calendarOptions.value.events);
     })
 
     .catch((err) => {
@@ -129,6 +130,40 @@ async function fetchDataCalendar(type: string) {
     });
 }
 
+/**
+ * fetch วันหยุดในปฏิทิน
+ */
+async function fetchDataHoliday(optionsCalendaMain: any) {
+  await http
+    .get(
+      config.API.listHolidayHistoryYearMonth(
+        dateMonth.value.year,
+        dateMonth.value.month + 1
+      )
+    )
+    .then((res) => {
+      console.log(res);
+
+      const dataNormal = res.data.result.normal;
+      const data = dataNormal;
+      const event = data.map((e: any) => ({
+        id: e.id,
+        title: `${e.name} `,
+        start: e.holidayDate,
+        end: new Date(
+          new Date(e.holidayDate).setHours(23, 59, 59)
+        ).toISOString(),
+        allDay: e.holidayDate === e.holidayDate ? true : false,
+        color: " #CCE5FF",
+        textColor: "#0080FF",
+      }));
+      calendarOptions.value.events = [...optionsCalendaMain, ...event];
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
 /**
  * function convert ชื่อ
  * @param id profile
@@ -146,7 +181,7 @@ const filterVal = ref<any>([]);
 
 watch(
   () => filterVal.value,
-  () => {
+  async () => {
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter((e: ResCalendar) => e.keycloakId === item)
@@ -162,6 +197,7 @@ watch(
     });
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
+    await fetchDataHoliday(calendarOptions.value.events);
   }
 );
 
@@ -282,6 +318,15 @@ const monthYearThai = (val: DataDateMonthObject) => {
                 />
                 <span class="text-caption">{{ item.name }}</span>
               </div>
+              <div class="items-center col-3">
+                <q-icon
+                  size="10px"
+                  name="mdi-circle"
+                  class="q-mr-xs"
+                  style="color: #cce5ff"
+                />
+                <span class="text-caption">วันหยุดในปฏิทิน</span>
+              </div>
             </div>
           </div>
         </div>