Изменила архитектуру

src/pages/calendar/TheCalendar.vue

@@ -26,7 +26,7 @@ export default {
       currentDate: moment(),
       timeInformation: {
         dayStartTime: "0:00",
-        dayEndTime: "20:00",
+        dayEndTime: "22:00",
       },
       eventsData: [],
       teamData: [],

src/pages/calendar/components/CalendarBackground.vue

@@ -1,22 +1,9 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
-    :class="horizontalScrollPresence"
+    :style="backgroundExtendedWidth"
     )
-    .header-wrapper
+    .body.flex.flex-col
-      .header(:style="backgroundExtendedWidth")
-    calendar-column(
-      v-for="(owner, index) in filteredOwners"
-      :key="owner.id"
-      :owner-data="owner"
-      :style="calculateColumnPosition(index)"
-      :day-events="filterEventsByOwner(owner)"
-      :day-start-time="dayStartTime"
-      :day-end-time="dayEndTime"
-      )
-    .body.flex.flex-col(
-      :style="backgroundExtendedWidth"
-      )
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in timeCoil"
@@ -26,10 +13,8 @@
 </template>
 
 <script>
-import CalendarColumn from "./CalendarColumn.vue";
 export default {
   name: "CalendarBackground",
-  components: { CalendarColumn },
   props: {
     timeCoil: Array,
     filteredOwners: Array,
@@ -38,6 +23,7 @@ export default {
     sidebarWidth: String,
     dayStartTime: Number,
     dayEndTime: Number,
+    ownersCount: Number,
   },
   data() {
     return {
@@ -52,24 +38,18 @@ export default {
       return this.filteredOwners.length;
     },
     backgroundExtendedWidth() {
-      if (this.ownersArrayLength > 3) {
+      if (this.ownersCount > 3) {
         return {
-          width: `${this.defaultColumnWidth * this.ownersArrayLength}px`,
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
         };
       }
       return {
-        width: "auto",
+        width: "100%",
       };
     },
     backgroundHeight() {
       return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
     },
-    filteredEventsByDate() {
-      return this.eventsData.filter(
-        ({ start }) =>
-          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
-      );
-    },
     horizontalScrollPresence() {
       return {
         "scroll-x": this.ownersArrayLength > 3,
@@ -97,18 +77,6 @@ export default {
     calculateBackgroundWidth() {
       this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
     },
-    filterEventsByOwner(owner) {
-      let filteredArray = [];
-      this.filteredEventsByDate.forEach((item) => {
-        let foundEvent = item.employees.find(
-          (elem) =>
-            JSON.stringify(elem.employee) === JSON.stringify(owner) &&
-            elem.role === "owner"
-        );
-        if (foundEvent) filteredArray.push(item);
-      });
-      return filteredArray;
-    },
   },
   mounted() {
     this.calculateBackgroundWidth();
@@ -117,11 +85,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.scroll-x
-  overflow-x: auto
-
 .calendar-background-wrapper
-  width: 100%
   position: relative
 
 .header-wrapper

src/pages/calendar/components/CalendarClockColumn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-45px.px-3
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-45px.px-3
     span.text-base(
       v-for="hour in timeCoil"
       :key="hour"
@@ -59,6 +59,4 @@ export default {
   width: 80px
   height: 100%
   color: var(--font-dark-blue-color)
-  position: sticky
-  left: 0
 </style>

src/pages/calendar/components/CalendarColumn.vue

@@ -75,19 +75,15 @@ export default {
 
 <style lang="sass" scoped>
 .calendar-column-wrapper
-  position: absolute
   border-right: 1px solid var(--border-light-grey-color)
   &:nth-last-child(2) .header
     border-right: none
-  &:nth-last-child(2)
+  &:last-child
     border-right: none
 
 .header
-  height: 48px
   position: sticky
   z-index: 5
-  width: inherit
-  border-right: 1px solid var(--border-light-grey-color)
   background-color: var(--default-white)
 
 .body

src/pages/calendar/components/CalendarHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6.top-0
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
       base-arrow-button.left-arrow.mr-4(@click="previousHandler")
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -51,7 +51,6 @@ export default {
   background-color: var(--default-white)
   height: 56px
   border-radius: 4px
-  position: sticky
   z-index: 10
 
 .left-arrow

src/pages/calendar/components/CalendarSchedule.vue

@@ -10,32 +10,43 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout"
       )
-    .schedule-body.flex(
+    .schedule-body
-      )
+      .column-wrapper.flex.ml-20.absolute(:style="columnWrapperWidth")
-      div
+        calendar-column(
-        calendar-clock-column(
+          v-for="(owner, index) in filteredOwners"
-          :timeCoil="timeCoil"
+          :key="owner.id"
-          :current-time="currentTime"
+          :owner-data="owner"
-          :is-current-date="isCurrentDate"
+          :day-events="filterEventsByOwner(owner)"
+          :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
+          :style="columnWidth"
+        )
+      .flex.w-full.relative
+        .time-coil-wrapper.left-0.-mt-3
+          calendar-clock-column(
+            :timeCoil="timeCoil"
+            :current-time="currentTime"
+            :is-current-date="isCurrentDate"
+            :day-end-time="validateEndTime"
+          )
+        .flex
+          calendar-background(
+            :current-date="currentDate"
+            :time-coil="timeCoil"
+            :events-data="eventsData"
+            :sidebar-width="sidebarWidth"
+            :day-start-time="validateStartTime"
+            :day-end-time="validateEndTime"
+            :owners-count="ownersCount"
+            )
+        .time-circle-indicator.left-74px(
+          v-if="isShownIndicator"
+          :style="circleIndicatorLocation"
+          )
+        span.time-line-indicator.block.left-20(
+          v-if="isShownIndicator"
+          :style="lineIndicatorLocation"
           )  
-      calendar-background(
-        :current-date="currentDate"
-        :time-coil="timeCoil"
-        :events-data="eventsData"
-        :filtered-owners="filteredOwners"
-        :sidebar-width="sidebarWidth"
-        :day-start-time="validateStartTime"
-        :day-end-time="validateEndTime"
-        )
-      .time-circle-indicator.left-74px(
-        v-if="isShownIndicator"
-        :style="circleIndicatorLocation"
-        )
-      span.time-line-indicator.block.left-20(
-        v-if="isShownIndicator"
-        :style="lineIndicatorLocation"
-        )  
 </template>
 
 <script>
@@ -43,12 +54,14 @@ import * as moment from "moment/moment";
 import CalendarHeader from "./CalendarHeader.vue";
 import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
+import CalendarColumn from "./CalendarColumn.vue";
 export default {
   name: "CalendarSchedule",
   components: {
     CalendarHeader,
     CalendarBackground,
     CalendarClockColumn,
+    CalendarColumn,
   },
   props: {
     currentDate: {
@@ -81,7 +94,6 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
-      sheduleHeight: 0,
     };
   },
   computed: {
@@ -101,9 +113,9 @@ export default {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
     lineIndicatorLocation() {
-      if (this.filteredOwners.length > 3 && this.timeCoil.length - 1 > 13) {
+      if (this.ownersCount > 3 && this.timeCoil.length - 1 > 13) {
         return {
-          width: `${this.filteredOwners.length * this.defaultColumnWidth}px`,
+          width: `${this.ownersCount * this.defaultColumnWidth}px`,
           top: `${this.calculateIndicatorLocation()}px`,
         };
       }
@@ -161,6 +173,37 @@ export default {
         (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
       );
     },
+    ownersCount() {
+      return this.filteredOwners.length;
+    },
+    filteredEventsByDate() {
+      return this.eventsData.filter(
+        ({ start }) =>
+          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
+      );
+    },
+    columnWidth() {
+      if (this.ownersCount > 3) {
+        console.log(this.defaultColumnWidth * this.ownersCount);
+        return {
+          width: `${this.defaultColumnWidth}px`,
+        };
+      }
+      return {
+        width: `calc(100% / ${this.ownersCount})`,
+      };
+    },
+    columnWrapperWidth() {
+      if (this.ownersCount > 3) {
+        console.log(this.defaultColumnWidth * this.ownersCount);
+        return {
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
+        };
+      }
+      return {
+        width: "100%",
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -224,8 +267,7 @@ export default {
         .map((elem) => parseInt(elem, 10));
       let result =
         (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
-        newTime[1] * this.pixelsPerMinute +
+        newTime[1] * this.pixelsPerMinute;
-        this.columnHeaderHeight;
       if (result > this.scheduleHeight || result < 0) {
         this.isShownIndicator = false;
         return 0;
@@ -237,6 +279,18 @@ export default {
         (item) => JSON.stringify(item) === JSON.stringify(object)
       );
     },
+    filterEventsByOwner(owner) {
+      let filteredArray = [];
+      this.filteredEventsByDate.forEach((item) => {
+        let foundEvent = item.employees.find(
+          (elem) =>
+            JSON.stringify(elem.employee) === JSON.stringify(owner) &&
+            elem.role === "owner"
+        );
+        if (foundEvent) filteredArray.push(item);
+      });
+      return filteredArray;
+    },
   },
   watch: {
     currentTime() {
@@ -281,8 +335,6 @@ export default {
   background-color: var(--default-white)
   width: calc(100% - (var(--sidebar-width) + 8px))
   height: calc(100vh - 56px - 8px)
-  overflow-y: auto
-  overflow-x: hidden
 
 .time-line-indicator
   width: calc(100% - 80px)
@@ -296,6 +348,18 @@ export default {
   border-radius: 50%
   position: absolute
 
+.column-wrapper
+  height: 48px
+  background-color: var(--default-white)
+
+.time-coil-wrapper
+  position: sticky
+  z-index: 5
+  background-color: var(--default-white)
+
 .schedule-body
-  position: relative
+  width: 100%
+  height: calc(100vh - 56px - 8px - 56px)
+  overflow-y: auto
+  overflow-x: auto
 </style>