Доделала скроллы, зафиксировала хедер

src/pages/calendar/components/CalendarBackground.vue

@@ -64,17 +64,17 @@ export default {
     backgroundHeight() {
       return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
     },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
-      };
-    },
     filteredEventsByDate() {
       return this.eventsData.filter(
         ({ start }) =>
           start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
       );
     },
+    horizontalScrollPresence() {
+      return {
+        "scroll-x": this.ownersArrayLength > 3,
+      };
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -95,7 +95,7 @@ export default {
       };
     },
     calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
+      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
     },
     filterEventsByOwner(owner) {
       let filteredArray = [];
@@ -118,8 +118,7 @@ export default {
 
 <style lang="sass" scoped>
 .scroll-x
-  overflow-x: scroll
-  overflow-y: hidden
+  overflow-x: auto
 
 .calendar-background-wrapper
   width: 100%

src/pages/calendar/components/CalendarColumn.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-column-wrapper.flex.flex-col
-    .header.flex.items-center.justify-between.py-2.px-6
+    .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
@@ -77,11 +77,14 @@ export default {
 .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)
+    border-right: none
 
 .header
   height: 48px
   position: sticky
-  top: 0px
   z-index: 5
   width: inherit
   border-right: 1px solid var(--border-light-grey-color)

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

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-  .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
+  .schedule.ml-2(
+    :style="scheduleWidth"
+    ref="shedule"
+    )
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -8,8 +11,6 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body.flex(
-      :class="bodyVerticalScroll"
-      :style="setBodySize"
       )
       div
         calendar-clock-column(
@@ -80,6 +81,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
+      sheduleHeight: 0,
     };
   },
   computed: {
@@ -128,21 +130,6 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
-    bodyVerticalScroll() {
-      return {
-        "scroll-y": this.scheduleHeight > 855,
-      };
-    },
-    setBodySize() {
-      if (this.validateEndTime - this.validateStartTime > 13) {
-        return {
-          height: "855px",
-        };
-      }
-      return {
-        width: "auto",
-      };
-    },
     filteredOwners() {
       let filteredArray = [];
       let ownerAbsence = {
@@ -290,11 +277,12 @@ export default {
 
 <style lang="sass" scoped>
 .schedule
+  position: relative
   background-color: var(--default-white)
   width: calc(100% - (var(--sidebar-width) + 8px))
-
-.scroll-y
-  overflow-y: scroll
+  height: calc(100vh - 56px - 8px)
+  overflow-y: auto
+  overflow-x: hidden
 
 .time-line-indicator
   width: calc(100% - 80px)