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

src/pages/calendar/components/CalendarBackground.vue

@@ -1,29 +1,17 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col
+  .calendar-background-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")
-        span.member-name.font-medium.text-base.mr-6 {{ info.name }}
-        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
-      base-doc-ok-button
     .body.flex.flex-col
-      span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
+      .time-circle-indicator.-left-6(v-if="isShownIndicator" :style="circleIndicatorLocation")
+      span.time-line-indicator.block(v-if="isShownIndicator" :style="lineIndicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
 
 <script>
-import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
 export default {
-  name: "CalendarColumn",
+  name: "CalendarBackground",
-  components: { BaseDocOkButton },
   props: {
-    info: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
     hoursArray: Array,
     currentTime: String,
   },
@@ -33,11 +21,16 @@ export default {
     };
   },
   computed: {
-    indicatorLocation() {
+    lineIndicatorLocation() {
       return {
         top: `${this.calculateIndicatorLocation()}px`,
       };
     },
+    circleIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation() - 6}px`,
+      };
+    },
   },
   methods: {
     calculateIndicatorLocation() {
@@ -56,7 +49,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.calendar-column-wrapper
+.calendar-background-wrapper
   width: 100%
 
 .header
@@ -65,21 +58,10 @@ export default {
 .body
   position: relative
 
-.avatar-wrapper
-  width: 32px
-  height: 32px
-
-.icon-wrapper
-  width: 24px
-  height: 24px
-
-.member-name
-  color: var(--font-dark-blue-color)
-
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
-  &:nth-child(2)
+  &:nth-child(3)
     height: 63px
     border-top: 1px solid var(--border-light-grey-color)
   &:last-child
@@ -89,8 +71,15 @@ export default {
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
 
-.time-indicator
+.time-line-indicator
   width: 100%
   border-top: 1px solid var(--time-indicator-color)
   position: absolute
+
+.time-circle-indicator
+  width: 12px
+  height: 12px
+  background-color: var(--time-indicator-color)
+  border-radius: 50%
+  position: absolute
 </style>

src/pages/calendar/components/CalendarClockColumn.vue

@@ -1,6 +1,6 @@
 <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 }}
+    span.font-medium.text-base(v-for="hour in hoursArray" :key="hour" :class="currentHourStyle(hour)") {{ hour }}
 </template>
 
 <script>
@@ -8,11 +8,33 @@ export default {
   name: "CalendarClockColumn",
   props: {
     hoursArray: Array,
+    currentTime: String,
+  },
+  computed: {
+    currentHour() {
+      return parseInt(this.currentTime.slice(0, -6), 10);
+    },
+  },
+  methods: {
+    currentHourStyle(elem) {
+      if (parseInt(elem.slice(0, 3), 10) === this.currentHour) {
+        return {
+          "current-time": true,
+          "font-bold": true,
+        };
+      }
+      return {
+        "current-time": false,
+      };
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.current-time
+  color: var(--time-indicator-color)
+
 .calendar-clock-column
   width: 80px
   height: 100%

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-clock-column(:hoursArray="hoursArray" :currentTime="currentTime")
-      calendar-column(:info="columnInfo" :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()) {
+        if (i === this.hours) {
-          this.hoursArray.push(this.hoursMinutes());
+          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()) {
+        if (parseInt(elem.slice(0, -3), 10) === this.hours) {
-          return this.hoursMinutes();
+          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>

tailwind.config.js

@@ -23,6 +23,9 @@ module.exports = {
       gap: {
         43: "43px",
       },
+      spacing: {
+        6: "6px",
+      },
     },
   },
   plugins: [],