WIP Доделала календарь

src/components/base/BaseCalendar.vue

@@ -23,12 +23,12 @@
         )
     .week.py-4.px-5.grid.grid-rows-1.grid-cols-7
       .flex.items-center.justify-center.week-item.text-xsx.py-1(v-for="day of week", :key="day") {{ day }}
-    .body.pb-5.px-5
+    .body.pb-7.px-5
       .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
         v-for="date of internalDatesList",
         @click="selectDate(date)",
         :key="date",
-        :style="calculateRangeStyle(date)"
+        :style="calculateRangeStyle(date)",
       )
         .flex.items-center.justify-center.rounded-full.w-full.h-full(
           :class="calculateCellClasses(date)",
@@ -92,10 +92,6 @@ export default {
       this.internalDate = this.internalDate.clone().add(1, "month");
     },
     calculateCellClasses(date) {
-      if (date.isSame(this.today, "day"))
-        return {
-          "date-today": true,
-        };
       if (this.defineDateRange(date))
         return {
           "date-active": true,
@@ -106,6 +102,11 @@ export default {
       )
         return {
           "text-white": true,
+          "date-range": true,
+        };
+      if (date.isSame(this.today, "day"))
+        return {
+          "date-today": true,
         };
       if (date.isSame(this.internalDate, "month"))
         return {
@@ -116,7 +117,12 @@ export default {
       };
     },
     calculateRangeStyle(date) {
-      if (this.range && this.value?.from && this.value?.to) {
+      if (
+        this.range &&
+        this.value?.from &&
+        this.value?.to &&
+        !this.value?.from.isSame(this.value?.to?.format("YYYY-MM-DD"))
+      ) {
         if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
           return {
             "border-top-left-radius": "9999px",
@@ -167,21 +173,7 @@ export default {
         date.isSame(this.value?.to?.format("YYYY-MM-DD"))
       );
     },
-    calculateRange(start, end, count) {
-      let internalCount = count ? count : end.diff(start, "days");
-      return [...Array(internalCount - 2)].map(() =>
-        start.add(1, "day").clone()
-      );
   },
-  },
-  // watch: {
-  //   modelValue: {
-  //     deep: true,
-  //     handler(value) {
-  //       console.log(value);
-  //     },
-  //   },
-  // },
   mounted() {
     if (this.value) {
       if (this.range) {
@@ -210,8 +202,10 @@ export default {
   color: var(--font-grey-color)
 .date-month
   color: var(--font-black-color)
-.date-other:hover, .date-month:hover, .date-today:hover
+.date-other:hover, .date-month:hover
   background-color: var(--border-light-grey-color)
+.date-today:hover, .date-range:hover
+  background-color: var(--btn-blue-color-2)
 .date-today
   border: 1px dashed var(--btn-blue-color)
   color: var(--btn-blue-color)

src/pages/newCalendar/components/CalendarHeader.vue

@@ -17,7 +17,8 @@
         dense,
         icon="arrow_back_ios_new",
         text-color="primary",
-        padding="2px 11px 2px 8px"
+        padding="2px 11px 2px 8px",
+        @click="previousWeek"
       )
       base-input(
         outlined,
@@ -25,40 +26,30 @@
         fontSize="16px",
         lineHeight="19px",
         iconRight,
-        id="calendarIcon"
+        v-model="currentWeek",
+        readonly
       )
-        q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)")
-          //q-popup-proxy(
-            cover,
-            transition-show="scale",
-            transition-hide="scale"
-            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
+        .h-5.w-5.flex.items-center.justify-center
+          q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
+            :size="calendarVisibility ? '10px' : '16px'"
           )
             q-menu(
               :style="{'margin-top': '4px !important'}"
-          target="#calendarIcon"
               v-model="calendarVisibility",
               transition-show="scale",
               transition-hide="scale"
-          anchor="bottom middle",
-          self="top middle"
+              self="top middle",
+              :offset="[118, 14]"
             )
-          base-calendar(v-model="date", range)
+              base-calendar(v-model="date", range, :range-count="7")
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
         round,
         size="14px",
         text-color="primary",
-        dense
+        dense,
+        @click="nextWeek"
       ) 
     .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
       q-btn-toggle(
@@ -91,18 +82,29 @@ export default {
         },
       ],
       date: {
-        from: moment().clone().add(1, "month"),
-        to: moment().clone().add(2, "month"),
+        from: moment(),
+        to: moment().clone().add(6, "day"),
       },
       calendarVisibility: false,
     };
   },
+  computed: {
+    currentWeek() {
+      return `${this.date?.from?.format(
+        "D MMMM YYYY"
+      )} - ${this.date?.to?.format("D MMMM YYYY")}`;
+    },
+  },
   methods: {
-    changeCalendarVisibility(value) {
-      this.calendarVisibility = value;
+    previousWeek() {
+      this.date.from = this.date.from.clone().subtract(1, "week");
+      this.date.to = this.date.to.clone().subtract(1, "week");
+    },
+    nextWeek() {
+      this.date.from = this.date.from.clone().add(1, "week");
+      this.date.to = this.date.to.clone().add(1, "week");
     },
   },
-  watch: {},
 };
 </script>
 
@@ -134,3 +136,7 @@ export default {
 .q-btn-group :deep(.q-btn-item)
   border-radius: 4px !important
 </style>
+<style lang="sass">
+.q-field--outlined.q-field--readonly .q-field__control:before
+  border-style: solid !important
+</style>