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

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");
+      const diff = this.dates?.to?.diff(this.dates?.from, "days") + 1;
-      this.dates.to = this.dates.to.clone().subtract(1, "week");
+      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");
+      const diff = this.dates?.to?.diff(this.dates?.from, "days") + 1;
-      this.dates.to = this.dates.to.clone().add(1, "week");
+      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,10 +145,18 @@ export default {
           this.changeSelectedDates(val);
       },
     },
-  },
+    selectedDates: {
-  mounted() {
+      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();

src/store/modules/calendar.js

@@ -25,8 +25,8 @@ const actions = {
     commit("setSelectedRecordId", id);
   },
   getEvents({ commit, state }) {
-    const start = state.selectedDates.from.toISOString();
+    const start = state.selectedDates.from.format("YYYY-MM-DDTHH:mm:ss");
-    const end = state.selectedDates.to.toISOString();
+    const end = state.selectedDates.to.format("YYYY-MM-DDTHH:mm:ss");
     fetchWrapper.get(`events?start=${start}&end=${end}`).then((data) => {
       if (Array.isArray(data)) {
         commit("setEvents", data);