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

src/components/base/BaseCalendar.vue

@@ -0,0 +1,118 @@
+<template lang="pug">
+  .calendar-wrapper.bg-white
+    .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
+      .text-smm.font-semibold {{ month }}
+      .arrows.flex.items-center.justify-center.gap-x-6
+        q-btn(
+          flat,
+          size="10px",
+          dense,
+          icon="arrow_back_ios_new",
+          text-color="black",
+          round,
+          @click="previousMonth"
+        )
+        q-btn(
+          flat,
+          icon="arrow_forward_ios",
+          size="10px",
+          text-color="black",
+          dense,
+          round,
+          @click="nextMonth"
+        )
+    .week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
+      .flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
+    .body.pb-6.px-6.grid.grid-rows-6.grid-cols-7.gap-x-1.gap-y-2
+      .flex.items-center.justify-center.h-8.w-8.rounded-full(
+        v-for="date of dates",
+        :style="calculateCurrentMonth(date)",
+        :key="date",
+      ) {{ date.format("DD") }}
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import { mapState } from "vuex";
+export default {
+  name: "BaseCalendar",
+  props: {
+    modelValue: Object,
+    range: Boolean,
+  },
+  data() {
+    return {
+      week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
+      currentDate: moment(),
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    ...mapState({
+      today: (state) => state.calendar.currentDate,
+    }),
+    month() {
+      let formattedMonth = this.currentDate.format("MMMM");
+      return `${
+        formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
+      } ${this.currentDate.format("YYYY")}`;
+    },
+    startDate() {
+      return this.currentDate
+        .clone()
+        .startOf("month")
+        .startOf("week")
+        .subtract(1, "day");
+    },
+    dates() {
+      return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
+    },
+  },
+  methods: {
+    previousMonth() {
+      this.currentDate = this.currentDate.clone().subtract(1, "month");
+    },
+    nextMonth() {
+      this.currentDate = this.currentDate.clone().add(1, "month");
+    },
+    calculateCurrentMonth(date) {
+      if (
+        date.isSame(this.today, "day") ||
+        date.isSame(this.currentDate, "day")
+      )
+        return {
+          color: "var(--default-white)",
+          "background-color": "var(--btn-blue-color)",
+        };
+      if (date.isSame(this.currentDate, "month"))
+        return {
+          color: "var(--font-black-color)",
+        };
+      return {
+        color: "var(--font-grey-color)",
+      };
+    },
+  },
+  mounted() {
+    if (this.value) this.currentDate = this.value.clone();
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.calendar-wrapper
+  width: 286px
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+.week-item
+  color: var(--font-grey-color)
+.week-item:nth-last-child(-n+2)
+  color: var(--border-red-color)
+</style>

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>
 

src/store/index.js

@@ -1,5 +1,6 @@
 import { createStore } from "vuex";
 import medical from "./modules/medicalCard";
+import calendar from "./modules/calendar";
 
 export default createStore({
   state: {
@@ -9,6 +10,7 @@ export default createStore({
   },
   modules: {
     medical,
+    calendar,
   },
   getters: {
     getUrl(state) {

src/store/modules/calendar.js

@@ -0,0 +1,17 @@
+import * as moment from "moment/moment";
+const state = () => ({
+  currentDate: moment(),
+});
+
+const getters = {};
+
+const actions = {};
+
+const mutations = {};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};