Настроила индикатор

src/pages/calendar/TheCalendar.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
   .calendar-container
     calendar-schedule(
-      :currentDate="currentDate"
-      :timeInformation="timeInformation"
+      :current-date="currentDate"
+      :time-information="timeInformation"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"

src/pages/calendar/components/CalendarBackground.vue

@@ -3,10 +3,19 @@
     .header.flex.items-center.justify-between.py-2.px-6
     .body.flex.flex-col
       .line-wrapper
-        .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
+        .line.flex.items-center(
+          v-for="hour in hoursArray"
+          :key="hour"
+          )
           .middle-line
-      .time-circle-indicator.-left-6px(v-if="isShownIndicator" :style="circleIndicatorLocation")
-      span.time-line-indicator.block(v-if="isShownIndicator" :style="lineIndicatorLocation")
+      .time-circle-indicator.-left-6px(
+        v-if="isShownIndicator"
+        :style="circleIndicatorLocation"
+        )
+      span.time-line-indicator.block(
+        v-if="isShownIndicator"
+        :style="lineIndicatorLocation"
+        )
 </template>
 
 <script>
@@ -17,10 +26,13 @@ export default {
     hoursArray: Array,
     currentTime: String,
     currentDate: Object,
+    dayStartTime: Number,
+    dayEndTime: Number,
   },
   data() {
     return {
       isShownIndicator: true,
+      pixelsPerHour: 62,
     };
   },
   computed: {
@@ -34,14 +46,22 @@ export default {
         top: `${this.calculateIndicatorLocation() - 6}px`,
       };
     },
+    scheduleSize() {
+      return (this.dayEndTime - this.dayStartTime) * this.pixelsPerHour;
+    },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
   },
   methods: {
     calculateIndicatorLocation() {
       let newTime = this.currentTime
         .split(":")
         .map((elem) => parseInt(elem, 10));
-      let result = (newTime[0] - 8) * 62 + newTime[1] * 1.03;
-      if (result > 620) {
+      let result =
+        (newTime[0] - this.dayStartTime) * this.pixelsPerHour +
+        newTime[1] * this.pixelsPerMinute;
+      if (result > this.scheduleSize || result < 0) {
         this.isShownIndicator = false;
         return 0;
       }

src/pages/calendar/components/CalendarClockColumn.vue

@@ -1,32 +1,39 @@
 <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" :key="hour" :class="currentHourStyle(hour)") {{ hour }}
+    span.font-medium.text-base(
+      v-for="hour in hoursArray"
+      :key="hour"
+      :class="currentHourStyle(hour)"
+      ) {{ hour }}
 </template>
 
 <script>
-import * as moment from "moment/moment";
 export default {
   name: "CalendarClockColumn",
   props: {
     hoursArray: Array,
     currentTime: String,
     currentDate: Object,
+    dayEndTime: Number,
+    isCurrentDate: Boolean,
   },
   computed: {
     currentHour() {
-      return parseInt(this.currentTime.slice(0, -6), 10);
+      return this.convertTime(this.currentTime, 0, -6);
     },
-    isCurrentDay() {
-      return (
-        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY")
-      );
+    currentMinute() {
+      return this.convertTime(this.currentTime, 3, -3);
+    },
+    isEndDay() {
+      return this.dayEndTime === this.currentHour && this.currentMinute > 0;
     },
   },
   methods: {
     currentHourStyle(elem) {
       if (
-        parseInt(elem.slice(0, 3), 10) === this.currentHour &&
-        this.isCurrentDay
+        this.convertTime(elem, 0, 3) === this.currentHour &&
+        !this.isEndDay &&
+        this.isCurrentDate
       ) {
         return {
           "current-time": true,
@@ -37,6 +44,9 @@ export default {
         "current-time": false,
       };
     },
+    convertTime(str, startIndex, endIndex) {
+      return parseInt(str.slice(startIndex, endIndex), 10);
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarHeader.vue

@@ -5,12 +5,11 @@
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")
       .text.flex.items-center
         span.font-medium.text-base {{ dateString }}
-          span.today.font-bold.text-xxs(v-if="isToday")  Сегодня
+          span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
     calendar-layout-switch(@selected="changeSelectedLayout")
 </template>
 
 <script>
-import * as moment from "moment/moment";
 import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
@@ -18,11 +17,7 @@ export default {
   components: { BaseArrowButton, CalendarLayoutSwitch },
   props: {
     currentDate: Object,
-  },
-  data() {
-    return {
-      isToday: true,
-    };
+    isCurrentDate: Boolean,
   },
   computed: {
     dateString() {
@@ -47,12 +42,6 @@ export default {
       this.$emit("next-date");
     },
   },
-  watch: {
-    currentDate: function () {
-      this.isToday =
-        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
-    },
-  },
 };
 </script>
 

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -1,7 +1,13 @@
 <template lang="pug">
   .layout-switch-wrapper.inline-block
-    button#day.py-2.px-3(:class="dayLayoutState" @click="changeSelectedLayout") День
-    button#week.py-2.px-3(:class="weekLayoutState" @click="changeSelectedLayout") Неделя
+    button#day.py-2.px-3(
+      :class="dayLayoutState"
+      @click="changeSelectedLayout"
+      ) День
+    button#week.py-2.px-3(
+      :class="weekLayoutState"
+      @click="changeSelectedLayout"
+      ) Неделя
 </template>
 
 <script>

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,13 +1,26 @@
 <template lang="pug">
   .schedule.ml-2
     calendar-header(
-      :currentDate="currentDate"
+      :current-date="currentDate"
+      :is-current-date="isCurrentDate"
       @previous-date="previousDate"
       @next-date="nextDate"
-      @selected-layout="selectedLayout")
+      @selected-layout="selectedLayout"
+      )
     .schedule-body.flex
-      calendar-clock-column(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
-      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
+      calendar-clock-column(
+        :hours-array="hoursArray"
+        :current-time="currentTime"
+        :is-current-date="isCurrentDate"
+        :day-end-time="validateEndTime"
+        )
+      calendar-background(
+        :hours-array="hoursArray"
+        :current-time="currentTime"
+        :current-date="currentDate"
+        :day-start-time="validateStartTime"
+        :day-end-time="validateEndTime"
+        )
 </template>
 
 <script>
@@ -37,15 +50,25 @@ export default {
       currentTime: "",
       hoursArray: [],
       timer: null,
+      isCurrentDate: true,
     };
   },
   computed: {
     hours() {
-      return parseInt(this.currentTime.slice(0, -6), 10);
+      return this.convertTime(this.currentTime, 0, -6);
+    },
+    minutes() {
+      return this.convertTime(this.currentTime, 3, -3);
     },
     hoursMinutes() {
       return this.currentTime.slice(0, -3);
     },
+    validateStartTime() {
+      return this.verifyTime(this.timeInformation.dayStartTime);
+    },
+    validateEndTime() {
+      return this.verifyTime(this.timeInformation.dayEndTime);
+    },
   },
   methods: {
     previousDate() {
@@ -58,11 +81,14 @@ export default {
       this.$emit("selected-layout", option);
     },
     startTimer() {
-      if (this.hours >= 8 && this.hours < 18) {
+      if (
+        this.hours >= this.validateStartTime &&
+        this.hours < this.validateEndTime
+      ) {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
           this.changeHoursArray();
-        }, 30000);
+        }, 5000);
       }
     },
     stopTimer() {
@@ -73,25 +99,56 @@ export default {
       this.currentTime = moment().format("HH:mm:ss");
     },
     hoursArrayInitialization() {
-      for (let i = 8; i <= 18; i++) {
-        if (i === this.hours && this.hours >= 8 && this.hours < 18) {
+      this.hoursArray = [];
+      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+        if (
+          i === this.hours &&
+          this.hours !== this.validateEndTime &&
+          this.isCurrentDate
+        ) {
           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 (this.convertTime(elem, 0, -3) === this.hours) {
           return this.hoursMinutes;
         }
         return elem;
       });
     },
+    verifyTime(dayTime) {
+      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
+      return newTime;
+    },
+    convertTime(str, startIndex, endIndex) {
+      return parseInt(str.slice(startIndex, endIndex), 10);
+    },
   },
   watch: {
     currentTime() {
-      if (this.hours >= 18) {
+      if (
+        this.hours === this.validateEndTime &&
+        this.minutes > 0 &&
+        this.timer
+      ) {
         this.stopTimer();
+        this.hoursArrayInitialization();
+      }
+    },
+    currentDate: function () {
+      this.isCurrentDate =
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+      if (this.timer) {
+        this.stopTimer();
+        this.hoursArrayInitialization();
+      }
+      if (this.isCurrentDate) {
+        this.changeCurrentTime();
+        this.hoursArrayInitialization();
+        this.startTimer();
       }
     },
   },