Наладила скроллы

src/pages/calendar/TheCalendar.vue

@@ -26,8 +26,8 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "8:00",
-        dayEndTime: "18:00",
+        dayStartTime: "0:00",
+        dayEndTime: "20:00",
       },
       eventsData: [],
       team: [

src/pages/calendar/components/CalendarBackground.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
-    :class="scrollPresence"
+    :class="horizontalScrollPresence"
     )
+    .header-wrapper
+      .header(:style="backgroundExtendedWidth")
     calendar-column(
       v-for="(owner, index) in filteredOwners"
       :key="owner.id"
@@ -10,7 +12,6 @@
       :style="calculateColumnPosition(index)"
       :day-events="filterEventsByOwner(owner)"
       )
-    .header(:style="backgroundExtendedWidth")
     .body.flex.flex-col(
       :style="backgroundExtendedWidth"
       )
@@ -58,9 +59,9 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
-    scrollPresence() {
+    horizontalScrollPresence() {
       return {
-        scroll: this.ownersArrayLength > 3,
+        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
       };
     },
     filteredOwners() {
@@ -147,13 +148,16 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.scroll
+.scroll-x
   overflow-x: scroll
 
 .calendar-background-wrapper
   width: 100%
   position: relative
 
+.header-wrapper
+  position: relative
+
 .header
   height: 48px
 

src/pages/calendar/components/CalendarClockColumn.vue

@@ -59,4 +59,6 @@ export default {
   width: 80px
   height: 100%
   color: var(--font-dark-blue-color)
+  position: sticky
+  left: 0
 </style>

src/pages/calendar/components/CalendarColumn.vue

@@ -6,7 +6,7 @@
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .px-1
+    .body
       calendar-event-card(
         v-for="event in dayEvents"
         :key="event.id"
@@ -45,6 +45,16 @@ export default {
 
 .header
   height: 48px
+  position: sticky
+  top: 0px
+  z-index: 3
+  width: inherit
+  border-right: 1px solid var(--border-light-grey-color)
+  background-color: var(--default-white)
+
+.body
+  position: relative
+  z-index: 3
 
 .avatar-wrapper
   width: 32px

src/pages/calendar/components/CalendarEventCard.vue

@@ -48,7 +48,7 @@ export default {
   background-color: var(--bg-event-yellow-color)
   color: var(--font-black-color)
   position: relative
-  z-index: 2
+  z-index: 3
 
 .header
   width: 100%

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.ml-2.w-full(:style="scheduleWidth")
+  .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -7,7 +7,9 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout"
       )
-    .schedule-body.flex
+    .schedule-body.flex(
+      :class="bodyVerticalScroll"
+      )
       div
         calendar-clock-column(
           :hours-array="hoursArray"
@@ -115,6 +117,11 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
+    bodyVerticalScroll() {
+      return {
+        "scroll-y": this.scheduleHeight > 855,
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -186,6 +193,11 @@ export default {
       }
       return result;
     },
+    bodyScheduleHeight() {
+      if (this.scheduleHeight > 855) {
+        return this.scheduleHeight;
+      }
+    },
   },
   watch: {
     currentTime() {
@@ -229,6 +241,9 @@ export default {
   background-color: var(--default-white)
   width: calc(100% - (var(--sidebar-width) + 8px))
 
+.scroll-y
+  overflow-y: scroll
+
 .time-line-indicator
   width: calc(100% - 80px)
   border-top: 1px solid var(--bg-event-red-color)
@@ -243,4 +258,5 @@ export default {
 
 .schedule-body
   position: relative
+  height: 855px
 </style>