Исправила индикатор , настроила таймер

src/pages/calendar/components/CalendarColumn.vue

@@ -6,7 +6,7 @@
         span.member-name.font-medium.text-base.mr-6 {{ info.name }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .flex.flex-col
+    .body.flex.flex-col
       span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
@@ -44,8 +44,8 @@ export default {
       let newTime = this.currentTime
         .split(":")
         .map((elem) => parseInt(elem, 10));
-      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      let result = (newTime[0] - 8) * 62 + newTime[1] * 1.03;
-      if (result > 666) {
+      if (result > 620) {
         this.isShownIndicator = false;
         return 0;
       }
@@ -58,11 +58,12 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  position: relative
 
 .header
   height: 48px
-  border-bottom: 1px solid var(--border-light-grey-color)
+
+.body
+  position: relative
 
 .avatar-wrapper
   width: 32px
@@ -78,6 +79,9 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:nth-child(2)
+    height: 63px
+    border-top: 1px solid var(--border-light-grey-color)
   &:last-child
     display: none
 

src/pages/calendar/components/CalendarSchedule.vue

@@ -39,6 +39,12 @@ export default {
     };
   },
   methods: {
+    hours() {
+      return parseInt(this.currentTime.slice(0, -6), 10);
+    },
+    hoursMinutes() {
+      return this.currentTime.slice(0, -3);
+    },
     previousDate() {
       this.$emit("previous-date");
     },
@@ -48,43 +54,51 @@ export default {
     selectedLayout(option) {
       this.$emit("selected-layout", option);
     },
-    updateTime() {
+    startTimer() {
-      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (this.hours() <= 18 && this.hours() >= 8) {
-      if (currentHour < 20 && currentHour > 8) {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
           this.changeHoursArray();
         }, 30000);
       }
     },
+    stopTimer() {
+      clearInterval(this.timer);
+      this.timer = null;
+    },
     changeCurrentTime() {
       this.currentTime = moment().format("HH:mm:ss");
     },
     hoursArrayInitialization() {
       for (let i = 8; i <= 18; i++) {
-        let startTime = this.currentTime.slice(0, -3);
+        if (i === this.hours()) {
-        let currentHour = parseInt(startTime.slice(0, -3), 10);
+          this.hoursArray.push(this.hoursMinutes());
-        if (i === currentHour) {
-          this.hoursArray.push(startTime);
         } else this.hoursArray.push(`${i}:00`);
       }
     },
     changeHoursArray() {
-      let newCurrentTime = this.currentTime.slice(0, -3);
+      this.hoursArray = this.hoursArray.map((elem) => {
-      let currentHour = parseInt(newCurrentTime.slice(0, -3), 10);
+        if (parseInt(elem.slice(0, -3), 10) === this.hours()) {
-      let newHoursArray = this.hoursArray.map((elem) => {
+          return this.hoursMinutes();
-        if (parseInt(elem.slice(0, -3), 10) === currentHour) {
-          return this.currentTime.slice(0, -3);
         }
         return elem;
       });
-      this.hoursArray = newHoursArray;
+    },
+  },
+  watch: {
+    currentTime() {
+      if (this.hours() >= 18) {
+        this.stopTimer();
+      }
     },
   },
   mounted() {
     this.changeCurrentTime();
     this.hoursArrayInitialization();
-    this.updateTime();
+    this.startTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
   },
 };
 </script>