Добавила CalendarSchedule, прокинула пропсы

src/pages/calendar/components/CalendarColumn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col
+  .calendar-column-wrapper.flex.flex-col(@click="updateTime")
     .header.flex.items-center.justify-between.py-2.px-6
       .flex.items-center
         img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
@@ -7,11 +7,13 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     .body.flex.flex-col
-      .line.flex.items-center(v-for="hour in 10" :key="hour")
+      .line.flex.items-center(v-for="hour in hourArray" :key="hour")
+        span.self-start {{ hour}}
         .middle-line
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
 export default {
   name: "CalendarColumn",
@@ -24,6 +26,33 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      currtentTime: "",
+      hourArray: [
+        "8:00",
+        "9:00",
+        "10:00",
+        "11:00",
+        "12:00",
+        "13:00",
+        "14:00",
+        "15:00",
+        "16:00",
+        "17:00",
+        "18:00",
+      ],
+    };
+  },
+  methods: {
+    updateTime() {
+      setInterval(this.changeCurrentTime, 30000);
+    },
+    changeCurrentTime() {
+      this.currtentTime = moment().format("h:mm:ss");
+      console.log(this.currtentTime);
+    },
+  },
 };
 </script>
 
@@ -50,6 +79,8 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:last-child
+    display: none
 
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)