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

src/pages/calendar/TheCalendar.vue

@@ -1,29 +1,23 @@
 <template lang="pug">
-  .calendar-container.ml-2
+  .calendar-container
-    calendar-header(
+    calendar-schedule(
-      :currentDay="currentDate"
+      :currentDate="currentDate"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
-      @selectedLayout="changeCalendarLayout")
+      @selected-layout="changeCalendarLayout"
-    calendar-column(:info="columnInfo") 
+      )
 </template>
 
 <script>
 import * as moment from "moment/moment";
-import CalendarHeader from "./components/CalendarHeader.vue";
+import CalendarSchedule from "./components/CalendarSchedule.vue";
-import CalendarColumn from "./components/CalendarColumn.vue";
-import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader, CalendarColumn },
+  components: { CalendarSchedule },
   data() {
     return {
-      currentDate: moment(),
       calendarLayout: "",
-      columnInfo: {
+      currentDate: moment(),
-        name: "Захарова А.О.",
-        avatar: teamMemberAvatar,
-      },
     };
   },
   methods: {

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)

src/pages/calendar/components/CalendarHeader.vue

@@ -17,7 +17,7 @@ export default {
   name: "CalendarHeader",
   components: { BaseArrowButton, CalendarLayoutSwitch },
   props: {
-    currentDay: Object,
+    currentDate: Object,
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     dateString() {
-      let newStr = this.currentDay.format("D MMMM YYYY");
+      let newStr = this.currentDate.format("D MMMM YYYY");
       return newStr
         .split(" ")
         .map((elem, index) => {
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.$emit("selectedLayout", option);
+      this.$emit("selected-layout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -48,9 +48,9 @@ export default {
     },
   },
   watch: {
-    currentDay: function () {
+    currentDate: function () {
       this.isToday =
-        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
 };

src/pages/calendar/components/CalendarSchedule.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+  .schedule.ml-2
+    calendar-header(
+      :currentDate="currentDate"
+      @previous-date="previousDate"
+      @next-date="nextDate"
+      @selected-layout="selectedLayout")
+    calendar-column(:info="columnInfo") 
+</template>
+
+<script>
+import CalendarHeader from "./CalendarHeader.vue";
+import CalendarColumn from "./CalendarColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
+export default {
+  name: "CalendarSchedule",
+  components: { CalendarHeader, CalendarColumn },
+  props: {
+    currentDate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
+    };
+  },
+  methods: {
+    previousDate() {
+      this.$emit("previous-date");
+    },
+    nextDate() {
+      this.$emit("next-date");
+    },
+    selectedLayout(option) {
+      this.$emit("selected-layout", option);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.schedule
+  width: 100%
+</style>