WIP В процессе создания BaseInputDate

src/pages/calendar/TheCalendar.vue

@@ -79,7 +79,6 @@ export default {
       eventsData: [],
       schedulesData: [],
       isOpenForm: false,
-      WORKING_STATUS: "WORKS",
       //changeFormWasClosed: false,
       eventStatuses: statusesConfig,
     };
@@ -103,7 +102,7 @@ export default {
         return;
       }
       let filteredEmployees = res.results.filter(
-        (elem) => elem.status === this.WORKING_STATUS
+        (elem) => elem.status !== "DAY_OFF" && elem.status !== "VACATION"
       );
       if (filteredEmployees.length === 0) {
         this.schedulesData = [];

src/pages/calendar/components/CalendarHeader.vue

@@ -1,41 +1,59 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
-    .flex
-      q-btn.mr-4(
-        color="secondary",
+  .calendar-header-wrapper.flex.items-center.justify-between.py-4.pl-4.pr-6
+    .flex.items-center
+      //q-btn.mr-4(
+        color="blue-grey-1",
         round,
         size="14px",
         dense,
         text-color="primary",
         @click="previousHandler"
-      )
+      //)
         q-icon(name="arrow_back_ios", right)
-      q-btn.mr-4(
-        color="secondary",
+      //q-btn.mr-4(
+        color="blue-grey-1",
         icon="arrow_forward_ios",
         round,
         size="14px",
         text-color="primary",
         dense,
         @click="nextHandler"
-      ) 
-      .text.flex.items-center
+      //) 
+      //.text.flex.items-center
         span.font-medium.text-base {{ dateString }}
           span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
+      q-btn(
+        color="blue-grey-1",
+        round,
+        size="14px",
+        text-color="primary",
+        @click="previousHandler"
+        icon="arrow_back_ios_new"
+      )
+      base-input-date.mx-4(v-model="convertedDate", outlined, disabled)
+      q-btn(
+        color="blue-grey-1",
+        icon="arrow_forward_ios",
+        round,
+        size="14px",
+        text-color="primary",
+        @click="nextHandler"
+      ) 
     calendar-layout-switch(@selected="changeSelectedLayout")
 </template>
 
 <script>
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
   name: "CalendarHeader",
-  components: { CalendarLayoutSwitch },
+  components: { CalendarLayoutSwitch, BaseInputDate },
   props: {
     currentDate: Object,
     isCurrentDate: Boolean,
   },
   computed: {
-    dateString() {
+    /*dateString() {
       let newStr = this.currentDate.format("D MMMM YYYY");
       return newStr
         .split(" ")
@@ -44,6 +62,9 @@ export default {
           return elem;
         })
         .join(" ");
+    },*/
+    convertedDate() {
+      return new Date(this.currentDate);
     },
   },
   methods: {
@@ -51,10 +72,10 @@ export default {
       this.$emit("selected-layout", option);
     },
     previousHandler() {
-      this.$emit("previous-date");
+      //this.$emit("previous-date");
     },
     nextHandler() {
-      this.$emit("next-date");
+      //this.$emit("next-date");
     },
   },
 };
@@ -64,7 +85,7 @@ export default {
 .calendar-header-wrapper
   width: 100%
   background-color: var(--default-white)
-  height: 56px
+  height: 72px
   border-radius: 4px
   z-index: 10
 
@@ -81,4 +102,16 @@ export default {
 
 .today
   opacity: 0.5
+
+.bg-blue-grey-1
+  background: var(--bg-light-grey) !important
+
+.text-primary
+  color: var(--font-dark-blue-color-0) !important
+
+.q-btn--round
+  width: 32px !important
+  height: 32px !important
+  min-width: 32px !important
+  min-height: 32px !important
 </style>

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .layout-switch-wrapper.inline-block
-    button#day.py-2.px-3.transition.duration-200.ease-linear(
+  .layout-switch-wrapper.flex.h-10.p-1
+    button#day.flex.items-center.px-3.transition.duration-200.ease-linear(
       :class="dayLayoutState",
       @click="changeSelectedLayout"
     ) День
-    button#week.py-2.px-3.transition.duration-200.ease-linear(
+    button#week.flex.items-center.px-3.transition.duration-200.ease-linear(
       :class="weekLayoutState",
       @click="changeSelectedLayout"
     ) Неделя
@@ -41,12 +41,12 @@ export default {
 
 <style lang="sass" scoped>
 .active
-  background-color: var(--btn-blue-color-4)
+  background-color: var(--bg-aqua-blue)
   color: var(--default-white)
   border-radius: 4px
 
 .layout-switch-wrapper
-  background-color: var(--bg-lavender-color)
-  color: var(--font-dark-blue-color)
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
   border-radius: 4px
 </style>