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

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>