Сделала CalendarClockColumn

src/pages/calendar/components/CalendarClockColumn.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
+    span.font-medium.text-base(v-for="hour in hoursArray") {{ hour }}
+</template>
+
+<script>
+export default {
+  name: "CalendarClockColumn",
+  props: {
+    hoursArray: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-clock-column
+  width: 80px
+  height: 100%
+  color: var(--font-dark-blue-color)
+</style>

src/pages/calendar/components/CalendarColumn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col(@click="updateTime")
+  .calendar-column-wrapper.flex.flex-col
     .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,13 +7,11 @@
         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 hourArray" :key="hour")
-        span.self-start {{ hour}}
+      .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
 
 <script>
-import * as moment from "moment/moment";
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
 export default {
   name: "CalendarColumn",
@@ -25,33 +23,7 @@ export default {
         return {};
       },
     },
-  },
-  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);
-    },
+    hoursArray: Array,
   },
 };
 </script>
@@ -59,7 +31,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  background-color: var(--default-white)
 
 .header
   height: 48px

src/pages/calendar/components/CalendarSchedule.vue

@@ -5,16 +5,20 @@
       @previous-date="previousDate"
       @next-date="nextDate"
       @selected-layout="selectedLayout")
-    calendar-column(:info="columnInfo") 
+    .schedule-body.flex
+      calendar-clock-column(:hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray")
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import CalendarHeader from "./CalendarHeader.vue";
 import CalendarColumn from "./CalendarColumn.vue";
+import CalendarClockColumn from "./CalendarClockColumn.vue";
 import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "CalendarSchedule",
-  components: { CalendarHeader, CalendarColumn },
+  components: { CalendarHeader, CalendarColumn, CalendarClockColumn },
   props: {
     currentDate: {
       type: Object,
@@ -29,6 +33,20 @@ export default {
         name: "Захарова А.О.",
         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",
+      ],
     };
   },
   methods: {
@@ -41,6 +59,13 @@ export default {
     selectedLayout(option) {
       this.$emit("selected-layout", option);
     },
+    updateTime() {
+      setInterval(this.changeCurrentTime, 30000);
+    },
+    changeCurrentTime() {
+      this.currtentTime = moment().format("h:mm:ss");
+      console.log(this.currtentTime);
+    },
   },
 };
 </script>
@@ -48,4 +73,5 @@ export default {
 <style lang="sass" scoped>
 .schedule
   width: 100%
+  background-color: var(--default-white)
 </style>