WIP Настроила высоту колонок с учетом скролла

src/pages/calendar/TheCalendar.vue

@@ -30,8 +30,7 @@ export default {
           "Захарова А.О.",
           "Константинопольская Ю.В.",
           "Коломойцев И.К.",
-          "Ситников А.Г.",
+          "Зайцев В.С.",
-          null,
         ],
       },
     };

src/pages/calendar/components/CalendarBackground.vue

@@ -9,63 +9,35 @@
       :style="calculateColumnPosition(index)"
       )
     .header(:style="backgroundExtendedWidth")
-    .body.flex.flex-col(:style="backgroundExtendedWidth")
+    .body.flex.flex-col(
+      :style="backgroundExtendedWidth"
+      )
       .line-wrapper
         .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"
-        )
 </template>
 
 <script>
-import * as moment from "moment/moment";
 import CalendarColumn from "./CalendarColumn.vue";
 export default {
   name: "CalendarBackground",
   components: { CalendarColumn },
   props: {
     hoursArray: Array,
-    currentTime: String,
-    currentDate: Object,
-    dayStartTime: Number,
-    dayEndTime: Number,
     columnInformation: Object,
   },
   data() {
     return {
-      isShownIndicator: true,
-      pixelsPerHour: 62,
       backgroundWidth: 0,
       columnWidth: 0,
       defaultColumnWidth: 470,
+      pixelsPerHour: 62,
     };
   },
   computed: {
-    lineIndicatorLocation() {
-      return {
-        top: `${this.calculateIndicatorLocation()}px`,
-      };
-    },
-    circleIndicatorLocation() {
-      return {
-        top: `${this.calculateIndicatorLocation() - 6}px`,
-      };
-    },
-    scheduleSize() {
-      return (this.dayEndTime - this.dayStartTime) * this.pixelsPerHour;
-    },
-    pixelsPerMinute() {
-      return this.pixelsPerHour / 60;
-    },
     ownersArrayLength() {
       return this.columnInformation.owners.length;
     },
@@ -79,42 +51,28 @@ export default {
         width: "auto",
       };
     },
+    backgroundHeight() {
+      return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
+    },
   },
   methods: {
-    calculateIndicatorLocation() {
-      let newTime = this.currentTime
-        .split(":")
-        .map((elem) => parseInt(elem, 10));
-      let result =
-        (newTime[0] - this.dayStartTime) * this.pixelsPerHour +
-        newTime[1] * this.pixelsPerMinute;
-      if (result > this.scheduleSize || result < 0) {
-        this.isShownIndicator = false;
-        return 0;
-      }
-      return result;
-    },
     calculateColumnPosition(elemIndex) {
       if (this.ownersArrayLength < 4) {
         this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
         return {
           width: `${this.columnWidth}px`,
+          height: `${this.backgroundHeight}px`,
           left: `${elemIndex * this.columnWidth}px`,
         };
       }
       return {
         width: `${this.defaultColumnWidth}px`,
+        height: `${this.backgroundHeight}px`,
         left: `${elemIndex * this.defaultColumnWidth}px`,
       };
     },
     calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.clientWidth;
+      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
-    },
-  },
-  watch: {
-    currentDate: function () {
-      this.isShownIndicator =
-        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
   mounted() {
@@ -147,18 +105,4 @@ export default {
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
-
-.time-line-indicator
-  width: 100%
-  border-top: 1px solid var(--time-indicator-color)
-  position: absolute
-  z-index: 10
-
-.time-circle-indicator
-  width: 12px
-  height: 12px
-  background-color: var(--time-indicator-color)
-  border-radius: 50%
-  position: absolute
-  z-index: 10
 </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(
+    span.text-base(
       v-for="hour in hoursArray"
       :key="hour"
       :class="currentHourStyle(hour)"
@@ -42,6 +42,7 @@ export default {
       }
       return {
         "current-time": false,
+        "font-medium": true,
       };
     },
     convertTime(str, startIndex, endIndex) {

src/pages/calendar/components/CalendarColumn.vue

@@ -6,7 +6,7 @@
         span.owner-name.font-medium.text-base.mr-6 {{ columnInformation }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .body
+    div
 </template>
 
 <script>
@@ -16,7 +16,6 @@ export default {
   components: { BaseDocOkButton },
   props: {
     columnInformation: String,
-    elementKey: String,
   },
 };
 </script>
@@ -25,7 +24,6 @@ export default {
 .calendar-column-wrapper
   position: absolute
   border-right: 1px solid var(--border-light-grey-color)
-  height: calc(100% - 54px)
 
 .header
   height: 48px

src/pages/calendar/components/CalendarSchedule.vue

@@ -17,12 +17,16 @@
           )
       calendar-background(
         :hours-array="hoursArray"
-        :current-time="currentTime"
-        :current-date="currentDate"
-        :day-start-time="validateStartTime"
-        :day-end-time="validateEndTime"
         :column-information="columnInformation"
         )
+      .time-circle-indicator.left-74px(
+        v-if="isShownIndicator"
+        :style="circleIndicatorLocation"
+        )
+      span.time-line-indicator.block.left-20(
+        v-if="isShownIndicator"
+        :style="lineIndicatorLocation"
+        )  
 </template>
 
 <script>
@@ -63,6 +67,9 @@ export default {
       hoursArray: [],
       timer: null,
       isCurrentDate: true,
+      isShownIndicator: true,
+      pixelsPerHour: 62,
+      columnHeaderHeight: 48,
     };
   },
   computed: {
@@ -81,6 +88,25 @@ export default {
     validateEndTime() {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
+    lineIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+    circleIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation() - 6}px`,
+      };
+    },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
+    scheduleSize() {
+      return (
+        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour +
+        this.columnHeaderHeight
+      );
+    },
   },
   methods: {
     previousDate() {
@@ -138,6 +164,20 @@ export default {
     convertTime(str, startIndex, endIndex) {
       return parseInt(str.slice(startIndex, endIndex), 10);
     },
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let result =
+        (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
+        newTime[1] * this.pixelsPerMinute +
+        this.columnHeaderHeight;
+      if (result > this.scheduleSize || result < 0) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
+    },
   },
   watch: {
     currentTime() {
@@ -153,6 +193,7 @@ export default {
     currentDate: function () {
       this.isCurrentDate =
         this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+      this.isShownIndicator = this.isCurrentDate;
       if (this.timer) {
         this.stopTimer();
         this.hoursArrayInitialization();
@@ -179,4 +220,19 @@ export default {
 .schedule
   background-color: var(--default-white)
   width: calc(100% - 8px)
+
+.time-line-indicator
+  width: calc(100% - 80px)
+  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
+
+.schedule-body
+  position: relative
 </style>

tailwind.config.js

@@ -27,6 +27,7 @@ module.exports = {
         "6px": "6px",
         "10px": "10px",
         "3px": "3px",
+        "74px": "74px",
       },
     },
   },