Добавила интервал дат в параметры

src/pages/newCalendar/TheCalendar.vue

@@ -39,6 +39,7 @@ export default {
   computed: {
     ...mapState({
       selectedRecordId: (state) => state.calendar.selectedRecordId,
+      selectedDates: (state) => state.calendar.selectedDates,
     }),
   },
   methods: {
@@ -53,7 +54,12 @@ export default {
     },
     ...mapActions({
       changeSelectedRecordId: "changeSelectedRecordId",
+      changeSelectedDates: "changeSelectedDates",
+      getEvents: "getEvents",
     }),
+    convertDate(date) {
+      return moment(date?.split(".")?.reverse()?.join("-"));
+    },
   },
   watch: {
     selectedRecordId(value) {
@@ -62,6 +68,59 @@ export default {
     previewVisibility(value) {
       if (!value) this.changeSelectedRecordId(null);
     },
+    "$route.query": {
+      immediate: true,
+      deep: true,
+      handler(value) {
+        if (this.$route.path === "/calendar") {
+          if (!value?.start || !value?.end) {
+            this.changeSelectedDates({
+              from: moment().clone().startOf("week"),
+              to: moment().clone().endOf("week"),
+            });
+            this.$router.replace({
+              query: {
+                start: this.selectedDates?.from?.format("DD.MM.YYYY"),
+                end: this.selectedDates?.to?.format("DD.MM.YYYY"),
+              },
+            });
+          } else if (
+            value?.start !== this.selectedDates?.from?.format("DD.MM.YYYY") ||
+            value?.end !== this.selectedDates?.to?.format("DD.MM.YYYY")
+          )
+            this.changeSelectedDates({
+              from: this.convertDate(value?.start),
+              to: this.convertDate(value?.end),
+            });
+        }
+      },
+    },
+    selectedDates: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (
+          !newVal?.from?.isSame(oldVal?.from) ||
+          !newVal?.to?.isSame(oldVal?.to)
+        ) {
+          this.getEvents();
+          if (
+            this.$route.query?.start !== newVal?.from?.format("DD.MM.YYYY") &&
+            this.$route.query?.end !== newVal?.to?.format("DD.MM.YYYY")
+          ) {
+            this.$router.replace({
+              query: {
+                start: newVal?.from?.format("DD.MM.YYYY"),
+                end: newVal?.to?.format("DD.MM.YYYY"),
+              },
+            });
+          }
+        }
+      },
+    },
+  },
+  beforeUnmount() {
+    this.$route.query = {};
   },
 };
 </script>

src/pages/newCalendar/components/CalendarHeader.vue

@@ -111,15 +111,18 @@ export default {
   },
   methods: {
     previousWeek() {
-      this.dates.from = this.dates.from.clone().subtract(1, "week");
-      this.dates.to = this.dates.to.clone().subtract(1, "week");
+      const diff = this.dates?.to?.diff(this.dates?.from, "days") + 1;
+      this.dates.from = this.dates.from.clone().subtract(diff, "day");
+      this.dates.to = this.dates.to.clone().subtract(diff, "day");
     },
     nextWeek() {
-      this.dates.from = this.dates.from.clone().add(1, "week");
-      this.dates.to = this.dates.to.clone().add(1, "week");
+      const diff = this.dates?.to?.diff(this.dates?.from, "days") + 1;
+      this.dates.from = this.dates.from.clone().add(diff, "day");
+      this.dates.to = this.dates.to.clone().add(diff, "day");
     },
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
+      getEvents: "getEvents",
     }),
     saveDatesChange() {
       this.calendarVisibility = false;
@@ -142,9 +145,17 @@ export default {
           this.changeSelectedDates(val);
       },
     },
-  },
-  mounted() {
-    this.initializeDates();
+    selectedDates: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        if (
+          !val?.from.isSame(this.dates?.from) ||
+          !val?.to.isSame(this.dates?.to)
+        )
+          this.initializeDates();
+      },
+    },
   },
 };
 </script>

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -239,7 +239,6 @@ export default {
     this.changeCurrentTime();
     this.timeCoilInitialization();
     this.startTimer();
-    this.getEvents();
   },
   beforeUnmount() {
     this.stopTimer();