diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue
index 1fd0be8e4..4236ce491 100644
--- a/src/modules/09_leave/components/2_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@@ -7,7 +7,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
-import { useQuasar } from "quasar";
+import { colors, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRouter } from "vue-router";
@@ -20,6 +20,7 @@ import type {
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+import moment from "moment";
 
 const leaveStore = useLeavelistDataStore();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -90,22 +91,22 @@ async function fetchDataCalendar() {
         const filterName = {
           id: name,
           name: convertKeycloakId(name),
-          color: name === keycloakId.value ? "green" : "grey",
+          color: "green",
         };
 
         filterLists.value.push(filterName);
+        filterVal.value.push(name);
       }
 
       const data = mainData.value.filter(
         (e: any) => e.keycloakId === keycloakId.value
       );
-
       const event = data.map((e: any) => ({
         id: e.id,
         title: `${e.fullName} (${e.leaveTypeName}) `,
         start: e.leaveStartDate,
-        end: e.leaveEndDate,
-        allDay: true,
+        end: moment(e.leaveEndDate).format("YYYY-MM-DD") + " 23:59:59",
+        allDay: false,
         color: leaveStore.colorType(e.leaveTypeId),
         textColor: "black",
       }));
@@ -145,10 +146,10 @@ watch(
           id: e.id,
           title: `${e.fullName} (${e.leaveTypeName}) `,
           start: e.leaveStartDate,
-          end: e.leaveEndDate,
+          end: moment(e.leaveEndDate).format("YYYY-MM-DD") + " 23:59:59",
           color: leaveStore.colorType(e.leaveTypeId),
           textColor: "black",
-          allDay: true,
+          allDay: false,
         }));
     });
     const allEventData = [].concat(...eventData);
@@ -164,7 +165,7 @@ function redirectToDetail(id: string) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  filterVal.value.push(keycloakId.value);
+  // filterVal.value.push(keycloakId.value);
   await fetchDataCalendar();
 });
 
@@ -201,6 +202,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
           </q-item>
         </q-list>
       </div>
+
       <div class="col">
         <div class="row q-gutter-sm q-pb-sm main-content">
           <div class="demo-app-main">
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index d5b93d965..70016eb7c 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -375,6 +375,18 @@ export const useCounterMixin = defineStore("mixin", () => {
               onlycancel: true,
             },
           });
+        } else if (e.response.data.status == 400 && e.response.data.title) {
+          //validation errors
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `${e.response.data.title}`,
+              icon: "warning",
+              color: "red",
+              onlycancel: true,
+            },
+          });
         } else {
           const message = e.response.data.result ?? e.response.data.message;
           q.dialog({