WIP Добавила выделение диапазона

src/assets/sass/variables.sass

@@ -17,6 +17,7 @@
   --btn-blue-color-2: rgba(65, 105, 225, 0.5)
   --btn-blue-color-3: rgba(65, 105, 225, 0.2)
   --btn-blue-color-4: rgba(65, 105, 225, 0.8)
+  --btn-blue-color-5: rgba(65, 105, 225, 0.4)
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
   --font-grey-color-0: #85858b

src/components/base/BaseCalendar.vue

@@ -24,11 +24,14 @@
     .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(
+      .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
         v-for="date of internalDatesList",
-        :class="calculateInternalMonth(date)",
         @click="selectDate(date)",
         :key="date",
+        :style="calculateRangeStyle(date)"
+      )
+        .flex.items-center.justify-center.rounded-full.w-full.h-full(
+          :class="calculateCellClasses(date)",
         ) {{ date.format("D") }}
 </template>
 
@@ -88,7 +91,7 @@ export default {
     nextMonth() {
       this.internalDate = this.internalDate.clone().add(1, "month");
     },
-    calculateInternalMonth(date) {
+    calculateCellClasses(date) {
       if (date.isSame(this.today, "day"))
         return {
           "date-today": true,
@@ -97,6 +100,13 @@ export default {
         return {
           "date-active": true,
         };
+      if (
+        this.calculateRangeStyle(date) &&
+        Object.keys(this.calculateRangeStyle(date) === 1)
+      )
+        return {
+          "text-white": true,
+        };
       if (date.isSame(this.internalDate, "month"))
         return {
           "date-month": true,
@@ -105,6 +115,26 @@ export default {
         "date-other": true,
       };
     },
+    calculateRangeStyle(date) {
+      if (this.range && this.value?.from && this.value?.to) {
+        if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
+          return {
+            "border-top-left-radius": "9999px",
+            "border-bottom-left-radius": "9999px",
+            "background-color": "var(--btn-blue-color-5)",
+          };
+        if (date.isSame(this.value?.to?.format("YYYY-MM-DD")))
+          return {
+            "border-top-right-radius": "9999px",
+            "border-bottom-right-radius": "9999px",
+            "background-color": "var(--btn-blue-color-5)",
+          };
+        if (date.isAfter(this.value?.from) && date.isBefore(this.value?.to))
+          return {
+            "background-color": "var(--btn-blue-color-5)",
+          };
+      }
+    },
     selectDate(date) {
       if (!this.range) {
         this.value = date;
@@ -134,8 +164,7 @@ export default {
       }
       return (
         date.isSame(this.value?.from?.format("YYYY-MM-DD")) ||
-        date.isSame(this.value?.to?.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) {
@@ -157,11 +186,6 @@ export default {
     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();
     }
   },
@@ -191,10 +215,6 @@ export default {
 .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)

src/pages/newCalendar/components/CalendarHeader.vue

@@ -51,7 +51,7 @@
           anchor="bottom middle",
           self="top middle"
         )
-          base-calendar(v-model="date", range, :range-count="5")
+          base-calendar(v-model="date", range)
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",