Настроила отображение колонок и подложки

src/pages/calendar/TheCalendar.vue

@@ -63,5 +63,5 @@ export default {
 
 <style lang="sass" scoped>
 .calendar-container
-  width: 100%
+  width: calc(100% - 80px)
 </style>

src/pages/calendar/components/CalendarBackground.vue

@@ -1,13 +1,15 @@
 <template lang="pug">
-  .calendar-background-wrapper.flex.flex-col
+  .calendar-background-wrapper.flex.flex-col(
+    ref="backgroundWrapper"
+    )
     calendar-column(
       v-for="(owner, index) in columnInformation.owners"
       :key="owner"
       :column-information="owner"
       :style="calculateColumnPosition(index)"
       )
-    .header
+    .header(:style="backgroundExtendedWidth")
-    .body.flex.flex-col
+    .body.flex.flex-col(:style="backgroundExtendedWidth")
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in hoursArray"
@@ -42,7 +44,9 @@ export default {
     return {
       isShownIndicator: true,
       pixelsPerHour: 62,
-      columnWidth: 470,
+      backgroundWidth: 0,
+      columnWidth: 0,
+      defaultColumnWidth: 470,
     };
   },
   computed: {
@@ -62,6 +66,19 @@ export default {
     pixelsPerMinute() {
       return this.pixelsPerHour / 60;
     },
+    ownersArrayLength() {
+      return this.columnInformation.owners.length;
+    },
+    backgroundExtendedWidth() {
+      if (this.ownersArrayLength > 3) {
+        return {
+          width: `${this.defaultColumnWidth * this.ownersArrayLength}px`,
+        };
+      }
+      return {
+        width: "auto",
+      };
+    },
   },
   methods: {
     calculateIndicatorLocation() {
@@ -78,10 +95,21 @@ export default {
       return result;
     },
     calculateColumnPosition(elemIndex) {
+      if (this.ownersArrayLength < 4) {
+        this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
+        return {
+          width: `${this.columnWidth}px`,
+          left: `${elemIndex * this.columnWidth}px`,
+        };
+      }
       return {
-        left: `${elemIndex * this.columnWidth}px`,
+        width: `${this.defaultColumnWidth}px`,
+        left: `${elemIndex * this.defaultColumnWidth}px`,
       };
     },
+    calculateBackgroundWidth() {
+      this.backgroundWidth = this.$refs.backgroundWrapper.clientWidth;
+    },
   },
   watch: {
     currentDate: function () {
@@ -89,6 +117,9 @@ export default {
         this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
+  mounted() {
+    this.calculateBackgroundWidth();
+  },
 };
 </script>
 
@@ -96,6 +127,7 @@ export default {
 .calendar-background-wrapper
   width: 100%
   position: relative
+  overflow-x: scroll
 
 .header
   height: 48px
@@ -120,6 +152,7 @@ export default {
   width: 100%
   border-top: 1px solid var(--time-indicator-color)
   position: absolute
+  z-index: 10
 
 .time-circle-indicator
   width: 12px
@@ -127,4 +160,5 @@ export default {
   background-color: var(--time-indicator-color)
   border-radius: 50%
   position: absolute
+  z-index: 10
 </style>

src/pages/calendar/components/CalendarColumn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col(@click="output")
+  .calendar-column-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6
       .flex.items-center
         img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
@@ -18,18 +18,12 @@ export default {
     columnInformation: String,
     elementKey: String,
   },
-  methods: {
-    output(event) {
-      console.log(event.target.id);
-    },
-  },
 };
 </script>
 
 <style lang="sass" scoped>
 .calendar-column-wrapper
   position: absolute
-  width: 470px
   border-right: 1px solid var(--border-light-grey-color)
   height: calc(100% - 54px)
 

src/pages/calendar/components/CalendarSchedule.vue

@@ -8,12 +8,13 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body.flex
-      calendar-clock-column(
+      div
-        :hours-array="hoursArray"
+        calendar-clock-column(
-        :current-time="currentTime"
+          :hours-array="hoursArray"
-        :is-current-date="isCurrentDate"
+          :current-time="currentTime"
-        :day-end-time="validateEndTime"
+          :is-current-date="isCurrentDate"
-        )
+          :day-end-time="validateEndTime"
+          )
       calendar-background(
         :hours-array="hoursArray"
         :current-time="currentTime"
@@ -177,4 +178,5 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
+  width: calc(100% - 8px)
 </style>