WIP Стили для выделенных дат

src/components/base/BaseCalendar.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .calendar-wrapper.bg-white
     .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
-      .text-smm.font-semibold {{ month }}
+      .text-smm.font-semibold {{ internalMonth }}
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
           flat,
@@ -21,14 +21,15 @@
           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)",
+    .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
+      .flex.items-center.justify-center.rounded-full.cursor-pointer.w-full.h-full(
+        v-for="date of internalDatesList",
+        :class="calculateInternalMonth(date)",
+        @click="selectDate(date)",
         :key="date",
-      ) {{ date.format("DD") }}
+      ) {{ date.format("D") }}
 </template>
 
 <script>
@@ -39,11 +40,14 @@ export default {
   props: {
     modelValue: Object,
     range: Boolean,
+    rangeCount: Number,
   },
   data() {
     return {
       week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
-      currentDate: moment(),
+      internalDate: moment(),
+      selectedDate: null,
+      datesRange: [],
     };
   },
   computed: {
@@ -58,50 +62,108 @@ export default {
     ...mapState({
       today: (state) => state.calendar.currentDate,
     }),
-    month() {
-      let formattedMonth = this.currentDate.format("MMMM");
+    internalMonth() {
+      let formattedMonth = this.internalDate.format("MMMM");
       return `${
         formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.currentDate.format("YYYY")}`;
+      } ${this.internalDate.format("YYYY")}`;
     },
-    startDate() {
-      return this.currentDate
+    internalStartDate() {
+      return this.internalDate
         .clone()
         .startOf("month")
         .startOf("week")
         .subtract(1, "day");
     },
-    dates() {
-      return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
+    internalDatesList() {
+      return [...Array(42)].map(() =>
+        this.internalStartDate.add(1, "day").clone()
+      );
     },
   },
   methods: {
     previousMonth() {
-      this.currentDate = this.currentDate.clone().subtract(1, "month");
+      this.internalDate = this.internalDate.clone().subtract(1, "month");
     },
     nextMonth() {
-      this.currentDate = this.currentDate.clone().add(1, "month");
+      this.internalDate = this.internalDate.clone().add(1, "month");
     },
-    calculateCurrentMonth(date) {
-      if (
-        date.isSame(this.today, "day") ||
-        date.isSame(this.currentDate, "day")
-      )
+    calculateInternalMonth(date) {
+      if (date.isSame(this.today, "day"))
         return {
-          color: "var(--default-white)",
-          "background-color": "var(--btn-blue-color)",
+          "date-today": true,
         };
-      if (date.isSame(this.currentDate, "month"))
+      if (this.defineDateRange(date))
         return {
-          color: "var(--font-black-color)",
+          "date-active": true,
+        };
+      if (date.isSame(this.internalDate, "month"))
+        return {
+          "date-month": true,
         };
       return {
-        color: "var(--font-grey-color)",
+        "date-other": true,
       };
     },
+    selectDate(date) {
+      if (!this.range) {
+        this.value = date;
+        return;
+      }
+      if (this.rangeCount) {
+        this.value.from = date;
+        this.value.to = this.value.from.clone().add(this.rangeCount - 1, "day");
+        return;
+      }
+      if (this.value?.to) {
+        this.value.from = date;
+        this.value.to = null;
+        return;
+      }
+      if (date.isAfter(this.value?.from)) {
+        this.value.to = date;
+        return;
+      }
+      this.value.to = this.value.from;
+      this.value.from = date;
+      return;
+    },
+    defineDateRange(date) {
+      if (!this.range) {
+        return date.isSame(this.value?.format("YYYY-MM-DD"));
+      }
+      return (
+        date.isSame(this.value?.from?.format("YYYY-MM-DD")) ||
+        date.isSame(this.value?.to?.format("YYYY-MM-DD")) ||
+        (date.isAfter(this.value?.from) && date.isBefore(this.value?.to))
+      );
+    },
+    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) this.currentDate = this.value.clone();
+    if (this.value) {
+      if (this.range) {
+        this.internalDate = this.value?.from?.clone();
+        /*this.calculateRange(
+          this.value?.from.clone(),
+          this.value?.to.clone(),
+          this.rangeCount
+        );*/
+      } else this.internalDate = this.value?.clone();
+    }
   },
 };
 </script>
@@ -115,4 +177,29 @@ export default {
   color: var(--font-grey-color)
 .week-item:nth-last-child(-n+2)
   color: var(--border-red-color)
+.date-active
+  color: var(--default-white),
+  background-color: var(--btn-blue-color)
+.date-active:hover
+  opacity: 0.5
+.date-other
+  color: var(--font-grey-color)
+.date-month
+  color: var(--font-black-color)
+.date-other:hover, .date-month:hover, .date-today:hover
+  background-color: var(--border-light-grey-color)
+.date-today
+  border: 1px dashed var(--btn-blue-color)
+  color: var(--btn-blue-color)
+// .date-range
+//   background-color: var(--btn-blue-color-2)
+//   color: var(--default-white)
+//   border-radius: 0px
+.body
+  display: grid
+  grid-template-columns: repeat(7, 35px)
+  grid-template-rows: repeat(6, 35px)
+  row-gap: 4px
+  justify-content: center
+  align-items: center
 </style>

src/pages/newCalendar/components/CalendarHeader.vue

@@ -51,7 +51,7 @@
           anchor="bottom middle",
           self="top middle"
         )
-          base-calendar(v-model="date")
+          base-calendar(v-model="date", range, :range-count="5")
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -90,7 +90,10 @@ export default {
           value: "expanded",
         },
       ],
-      date: moment().clone().add(1, "month").add(15, "day"),
+      date: {
+        from: moment().clone().add(1, "month"),
+        to: moment().clone().add(2, "month"),
+      },
       calendarVisibility: false,
     };
   },