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

src/App.vue

@@ -17,7 +17,7 @@ html
     border-radius: 4px
     background-color: var(--bg-ligth-blue-color)
   ::-webkit-scrollbar-thumb
-    background-color: var(--btn-blue-color-2)
+    background-color: var(--bg-aqua-blue)
     border-radius: 4px
 #app
   font-feature-settings: 'pnum' on, 'lnum' on

src/assets/sass/variables.sass

@@ -3,6 +3,7 @@
   --bg-body-color: #e8e8f3
   --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
+  --font-dark-blue-color-0: rgba(37, 40, 80, 0.7)
   --font-black-color: #090a15
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --icon-light-blue: #d7d9ff
@@ -19,6 +20,7 @@
   --font-grey-color: #9294a7
   --font-grey-color-0: #85858b
   --border-light-grey-color: #d3d4dc
+  --bg-light-grey: #eff1f4
   --row-overlay-color: #f5f6ff
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)

src/components/TheHeader.vue

@@ -10,6 +10,7 @@
     .flex.ml-auto
       q-btn.mr-9(
         color="primary",
+        outline,
         dense,
         padding="4px 22px",
         @click="openForm"

src/components/base/BaseInputDate.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+  base-input.w-full(v-bind="$props", v-model="value")
+    .flex.items-center
+      q-icon(name="app:calendar" class="cursor-pointer" size="18px")
+        q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+          q-date(v-model="value")
+            div(class="row items-center justify-end")
+              q-btn(v-close-popup label="Close" color="primary" flat)
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import * as moment from "moment/moment";
+
+export default {
+  name: "BaseInputDate",
+  components: { BaseInput },
+  props: {
+    modelValue: {
+      type: Date,
+      default: () => new Date(),
+    },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return moment(this.modelValue).format("D MMMM YYYY");
+      },
+      set(value) {
+        this.$emit("update:modelValue", value ? new Date(value) : null);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>

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
+  .calendar-header-wrapper.flex.items-center.justify-between.py-4.pl-4.pr-6
-    .flex
+    .flex.items-center
-      q-btn.mr-4(
+      //q-btn.mr-4(
-        color="secondary",
+        color="blue-grey-1",
         round,
         size="14px",
         dense,
         text-color="primary",
         @click="previousHandler"
-      )
+      //)
         q-icon(name="arrow_back_ios", right)
-      q-btn.mr-4(
+      //q-btn.mr-4(
-        color="secondary",
+        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
+  .layout-switch-wrapper.flex.h-10.p-1
-    button#day.py-2.px-3.transition.duration-200.ease-linear(
+    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)
+  background-color: var(--bg-light-grey)
-  color: var(--font-dark-blue-color)
+  color: var(--font-grey-color)
   border-radius: 4px
 </style>