Добавила подсветку текушего времени

src/pages/calendar/components/CalendarSchedule.vue

@@ -6,19 +6,18 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout")
     .schedule-body.flex
-      calendar-clock-column(:hoursArray="hoursArray")
-      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
+      calendar-clock-column(:hoursArray="hoursArray" :currentTime="currentTime")
+      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime")
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./CalendarHeader.vue";
-import CalendarColumn from "./CalendarColumn.vue";
+import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
-import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "CalendarSchedule",
-  components: { CalendarHeader, CalendarColumn, CalendarClockColumn },
+  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
   props: {
     currentDate: {
       type: Object,
@@ -29,22 +28,20 @@ export default {
   },
   data() {
     return {
-      columnInfo: {
-        name: "Захарова А.О.",
-        avatar: teamMemberAvatar,
-      },
       currentTime: "",
       hoursArray: [],
       timer: null,
     };
   },
-  methods: {
+  computed: {
     hours() {
       return parseInt(this.currentTime.slice(0, -6), 10);
     },
     hoursMinutes() {
       return this.currentTime.slice(0, -3);
     },
+  },
+  methods: {
     previousDate() {
       this.$emit("previous-date");
     },
@@ -55,7 +52,7 @@ export default {
       this.$emit("selected-layout", option);
     },
     startTimer() {
-      if (this.hours() <= 18 && this.hours() >= 8) {
+      if (this.hours >= 8 && this.hours < 18) {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
           this.changeHoursArray();
@@ -71,15 +68,15 @@ export default {
     },
     hoursArrayInitialization() {
       for (let i = 8; i <= 18; i++) {
-        if (i === this.hours()) {
-          this.hoursArray.push(this.hoursMinutes());
+        if (i === this.hours) {
+          this.hoursArray.push(this.hoursMinutes);
         } else this.hoursArray.push(`${i}:00`);
       }
     },
     changeHoursArray() {
       this.hoursArray = this.hoursArray.map((elem) => {
-        if (parseInt(elem.slice(0, -3), 10) === this.hours()) {
-          return this.hoursMinutes();
+        if (parseInt(elem.slice(0, -3), 10) === this.hours) {
+          return this.hoursMinutes;
         }
         return elem;
       });
@@ -87,7 +84,7 @@ export default {
   },
   watch: {
     currentTime() {
-      if (this.hours() >= 18) {
+      if (this.hours >= 18) {
         this.stopTimer();
       }
     },
@@ -105,6 +102,5 @@ export default {
 
 <style lang="sass" scoped>
 .schedule
-  width: 100%
   background-color: var(--default-white)
 </style>