Подстроила индикатор под скролл

server.js

@@ -642,7 +642,6 @@ export function clientsServer() {
               },
             ],
           },
-
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
             start: "2022-10-25T17:10:00Z",
@@ -686,6 +685,49 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
+            start: "2022-10-26T20:10:00Z",
+            end: "2022-10-26T21:00:00Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
+                person: {
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: null,
+              },
+              {
+                id: "f541a0c7-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db938a67-e756-481f-a653-6325de7c567e",
+                  last_name: "Коломойцев",
+                  first_name: "Илья",
+                  patronymic: "Константинович",
+                },
+                role: "owner",
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");

src/pages/calendar/components/CalendarBackground.vue

@@ -32,6 +32,7 @@ export default {
   components: { CalendarColumn },
   props: {
     timeCoil: Array,
+    filteredOwners: Array,
     eventsData: Array,
     currentDate: Object,
     sidebarWidth: String,
@@ -68,37 +69,6 @@ export default {
         "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
       };
     },
-    filteredOwners() {
-      let filteredArray = [];
-      let ownerAbsence = {
-        id: null,
-        last_name: null,
-        first_name: null,
-        patronymic: null,
-      };
-      this.eventsData.forEach(({ employees }) => {
-        let findedElement = employees.find((elem) => elem.role === "owner");
-        let emptyDataPresence = this.findObjectInArray(
-          filteredArray,
-          ownerAbsence
-        );
-        if (!findedElement && !emptyDataPresence) {
-          filteredArray.push(ownerAbsence);
-        }
-        if (findedElement) {
-          let ownerPresence = this.findObjectInArray(
-            filteredArray,
-            findedElement.employee
-          );
-          if (!ownerPresence) {
-            filteredArray.push(findedElement.employee);
-          }
-        }
-      });
-      return filteredArray.sort(
-        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
-      );
-    },
     filteredEventsByDate() {
       return this.eventsData.filter(
         ({ start }) =>
@@ -127,11 +97,6 @@ export default {
     calculateBackgroundWidth() {
       this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
     },
-    findObjectInArray(array, object) {
-      return array.find(
-        (item) => JSON.stringify(item) === JSON.stringify(object)
-      );
-    },
     filterEventsByOwner(owner) {
       let filteredArray = [];
       this.filteredEventsByDate.forEach((item) => {

src/pages/calendar/components/CalendarColumn.vue

@@ -58,7 +58,7 @@ export default {
         start[1] * this.pixelsPerMinute;
       if (
         parseInt(start[0], 10) < this.dayStartTime ||
-        parseInt(end, 10) > this.dayEndTime
+        parseInt(end, 10) >= this.dayEndTime
       ) {
         return {
           top: "0px",

src/pages/calendar/components/CalendarSchedule.vue

@@ -9,6 +9,7 @@
       )
     .schedule-body.flex(
       :class="bodyVerticalScroll"
+      :style="setBodySize"
       )
       div
         calendar-clock-column(
@@ -21,6 +22,7 @@
         :current-date="currentDate"
         :time-coil="timeCoil"
         :events-data="eventsData"
+        :filtered-owners="filteredOwners"
         :sidebar-width="sidebarWidth"
         :day-start-time="validateStartTime"
         :day-end-time="validateEndTime"
@@ -77,6 +79,7 @@ export default {
       isShownIndicator: true,
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
+      defaultColumnWidth: 470,
     };
   },
   computed: {
@@ -96,6 +99,12 @@ export default {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
     lineIndicatorLocation() {
+      if (this.filteredOwners.length > 3 && this.timeCoil.length - 1 > 13) {
+        return {
+          width: `${this.filteredOwners.length * this.defaultColumnWidth}px`,
+          top: `${this.calculateIndicatorLocation()}px`,
+        };
+      }
       return {
         top: `${this.calculateIndicatorLocation()}px`,
       };
@@ -124,6 +133,47 @@ export default {
         "scroll-y": this.scheduleHeight > 855,
       };
     },
+    setBodySize() {
+      if (this.validateEndTime - this.validateStartTime > 13) {
+        return {
+          height: "855px",
+        };
+      }
+      return {
+        width: "auto",
+      };
+    },
+    filteredOwners() {
+      let filteredArray = [];
+      let ownerAbsence = {
+        id: null,
+        last_name: null,
+        first_name: null,
+        patronymic: null,
+      };
+      this.eventsData.forEach(({ employees }) => {
+        let findedElement = employees.find((elem) => elem.role === "owner");
+        let emptyDataPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyDataPresence) {
+          filteredArray.push(ownerAbsence);
+        }
+        if (findedElement) {
+          let ownerPresence = this.findObjectInArray(
+            filteredArray,
+            findedElement.employee
+          );
+          if (!ownerPresence) {
+            filteredArray.push(findedElement.employee);
+          }
+        }
+      });
+      return filteredArray.sort(
+        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      );
+    },
   },
   methods: {
     previousDate() {
@@ -195,6 +245,11 @@ export default {
       }
       return result;
     },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
   },
   watch: {
     currentTime() {
@@ -255,5 +310,4 @@ export default {
 
 .schedule-body
   position: relative
-  height: 855px
 </style>