Сделала линию индикатора времени в календаре

src/assets/sass/variables.sass

@@ -17,3 +17,4 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --time-indicator-color: #E93131

src/pages/calendar/components/CalendarColumn.vue

@@ -6,7 +6,8 @@
         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
-    .body.flex.flex-col
+    .flex.flex-col
+      span.block.time-indicator(:style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
@@ -24,6 +25,22 @@ export default {
       },
     },
     hoursArray: Array,
+    currentTime: String,
+  },
+  computed: {
+    indicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+  },
+  methods: {
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      return (newTime[0] - 7) * 60 + newTime[1];
+    },
   },
 };
 </script>
@@ -31,6 +48,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
+  position: relative
 
 .header
   height: 48px
@@ -56,4 +74,9 @@ export default {
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
+
+.time-indicator
+  width: 100%
+  border-top: 1px solid var(--time-indicator-color)
+  position: absolute
 </style>

src/pages/calendar/components/CalendarSchedule.vue

@@ -7,7 +7,7 @@
       @selected-layout="selectedLayout")
     .schedule-body.flex
       calendar-clock-column(:hoursArray="hoursArray")
-      calendar-column(:info="columnInfo" :hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")
 </template>
 
 <script>
@@ -34,19 +34,7 @@ export default {
         avatar: teamMemberAvatar,
       },
       currtentTime: "",
-      hoursArray: [
-        "8:00",
-        "9:00",
-        "10:00",
-        "11:00",
-        "12:00",
-        "13:00",
-        "14:00",
-        "15:00",
-        "16:00",
-        "17:00",
-        "18:00",
-      ],
+      hoursArray: [],
     };
   },
   methods: {
@@ -60,12 +48,21 @@ export default {
       this.$emit("selected-layout", option);
     },
     updateTime() {
-      setInterval(this.changeCurrentTime, 30000);
+      setInterval(this.changeCurrentTime, 5000);
     },
     changeCurrentTime() {
-      this.currtentTime = moment().format("h:mm:ss");
+      this.currtentTime = moment().format("HH:mm:ss");
       console.log(this.currtentTime);
     },
+    calculateHoursCount() {
+      for (let i = 8; i <= 18; i++) {
+        this.hoursArray.push(`${i}:00`);
+      }
+    },
+  },
+  mounted() {
+    this.calculateHoursCount();
+    this.updateTime();
   },
 };
 </script>