Сделала BaseCalendar

src/pages/newCalendar/components/CalendarHeader.vue

@@ -46,6 +46,7 @@
                 range,
                 :range-count="7",
                 :save="saveDatesChange",
+                :start-year="2000"
               )
       q-btn(
         color="secondary",
@@ -108,26 +109,16 @@ export default {
     previousWeek() {
       this.dates.from = this.dates.from.clone().subtract(1, "week");
       this.dates.to = this.dates.to.clone().subtract(1, "week");
-      this.changeSelectedDates(this.dates);
     },
     nextWeek() {
       this.dates.from = this.dates.from.clone().add(1, "week");
       this.dates.to = this.dates.to.clone().add(1, "week");
-      this.changeSelectedDates(this.dates);
     },
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
     saveDatesChange() {
       this.calendarVisibility = false;
-      if (
-        !this.dates?.from.isSame(this.selectedDates?.from) &&
-        !this.dates?.to.isSame(this.selectedDates?.to)
-      )
-        this.changeSelectedDates(this.dates);
-    },
-    cancelDatesChange() {
-      this.calendarVisibility = false;
     },
     initializeDates() {
       this.dates = {
@@ -137,19 +128,16 @@ export default {
     },
   },
   watch: {
-    // dates: {
-    //   deep: true,
-    //   handler(val) {
-    //     if (
-    //       !this.val?.from.isSame(this.selectedDates?.from) &&
-    //       !this.val?.to.isSame(this.selectedDates?.to)
-    //     )
-    //       this.changeSelectedDates(val);
-    //   },
-    // },
-    // calendarVisibility(val) {
-    //   if (val === false) this.initializeDates();
-    // }
+    dates: {
+      deep: true,
+      handler(val) {
+        if (
+          !this.val?.from.isSame(this.selectedDates?.from) &&
+          !this.val?.to.isSame(this.selectedDates?.to)
+        )
+          this.changeSelectedDates(val);
+      },
+    },
   },
   mounted() {
     this.initializeDates();