WIP Набросала кастомный календарь

src/pages/newCalendar/TheCalendar.vue

@@ -9,6 +9,7 @@
 import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
 import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
 import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
+import * as moment from "moment/moment";
 
 export default {
   name: "TheCalendar",
@@ -16,6 +17,7 @@ export default {
   data() {
     return {
       isOpen: false,
+      currentDate: moment(),
     };
   },
   methods: {

src/pages/newCalendar/components/CalendarHeader.vue

@@ -24,22 +24,34 @@
         :width="300",
         fontSize="16px",
         lineHeight="19px",
-        iconRight
+        iconRight,
+        id="calendarIcon"
       )
-        q-icon.text(name="app:calendar", size="20px")
-          q-popup-proxy(
+        q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)")
+          //q-popup-proxy(
             cover,
             transition-show="scale",
             transition-hide="scale"
-          )
-              q-date(v-model="date", minimal)
-                .flex.items-center.justify-end
-                  q-btn(
-                    v-close-popup,
-                    label="Закрыть",
-                    color="primary",
-                    flat
-                  )
+            anchor="bottom middle", self="top middle"
+          //)
+            //q-date(v-model="date", minimal, range)
+              .flex.items-center.justify-end
+                q-btn(
+                  v-close-popup,
+                  label="Закрыть",
+                  color="primary",
+                  flat
+                )
+        q-menu(
+          :style="{'margin-top': '4px !important'}"
+          target="#calendarIcon"
+          v-model="calendarVisibility",
+          transition-show="scale",
+          transition-hide="scale"
+          anchor="bottom middle",
+          self="top middle"
+        )
+          base-calendar(v-model="date")
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -61,9 +73,10 @@
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import * as moment from "moment/moment";
+import BaseCalendar from "@/components/base/BaseCalendar";
 export default {
   name: "CalendarHeader",
-  components: { BaseInput },
+  components: { BaseInput, BaseCalendar },
   data() {
     return {
       displayType: "collapsed",
@@ -77,9 +90,16 @@ export default {
           value: "expanded",
         },
       ],
-      date: moment(),
+      date: moment().clone().add(1, "month").add(15, "day"),
+      calendarVisibility: false,
     };
   },
+  methods: {
+    changeCalendarVisibility(value) {
+      this.calendarVisibility = value;
+    },
+  },
+  watch: {},
 };
 </script>