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

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>