Сделала CalendarClockColumn

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>