Удалила лишние пропсы и стили

src/pages/calendar/TheCalendar.vue

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

src/pages/calendar/components/CalendarBackground.vue

@@ -1,9 +1,8 @@
 <template lang="pug">
-  .calendar-background-wrapper.flex.flex-col(
+  .flex.flex-col(
-    ref="backgroundWrapper"
     :style="backgroundExtendedWidth"
     )
-    .body.flex.flex-col
+    .flex.flex-col
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in timeCoil"
@@ -17,26 +16,16 @@ export default {
   name: "CalendarBackground",
   props: {
     timeCoil: Array,
-    filteredOwners: Array,
-    eventsData: Array,
-    currentDate: Object,
-    sidebarWidth: String,
-    dayStartTime: Number,
-    dayEndTime: Number,
     ownersCount: Number,
   },
   data() {
     return {
-      backgroundWidth: 0,
       columnWidth: 0,
       defaultColumnWidth: 470,
       pixelsPerHour: 62,
     };
   },
   computed: {
-    ownersArrayLength() {
-      return this.filteredOwners.length;
-    },
     backgroundExtendedWidth() {
       if (this.ownersCount > 3) {
         return {
@@ -47,56 +36,14 @@ export default {
         width: "100%",
       };
     },
-    backgroundHeight() {
-      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
-    },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3,
-      };
-    },
-  },
-  methods: {
-    calculateColumnPosition(elemIndex) {
-      let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
-      if (this.ownersArrayLength < 4) {
-        this.columnWidth =
-          (this.backgroundWidth - deductible) / 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.scrollWidth;
-    },
-  },
-  mounted() {
-    this.calculateBackgroundWidth();
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.calendar-background-wrapper
-  position: relative
-
-.header-wrapper
-  position: relative
-
 .header
   height: 48px
 
-.body
-  position: relative
-
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px

src/pages/calendar/components/CalendarColumn.vue

@@ -76,8 +76,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   border-right: 1px solid var(--border-light-grey-color)
-  &:nth-last-child(2) .header
-    border-right: none
   &:last-child
     border-right: none
 

src/pages/calendar/components/CalendarSchedule.vue

@@ -10,7 +10,7 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body
-      .column-wrapper.flex.ml-20.relative(:style="columnWrapperWidth")
+      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
           v-for="(owner, index) in filteredOwners"
           :key="owner.id"
@@ -18,7 +18,7 @@
           :day-events="filterEventsByOwner(owner)"
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
-          :style="columnWidth"
+          :style="columnSize"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-3
@@ -38,12 +38,7 @@
         )
         .flex(:class="calendarBackgroundWidth")
           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"
             )
 </template>
@@ -187,7 +182,7 @@ export default {
         this.columnHeaderHeight
       );
     },
-    columnWidth() {
+    columnSize() {
       if (this.ownersCount > 3) {
         return {
           height: `${this.columnHeight}px`,
@@ -260,7 +255,7 @@ export default {
         if (this.convertTime(elem, 0, -3) === this.hours) {
           return this.hoursMinutes;
         }
-        return elem;
+        return elem.slice(0, -3) + ":00";
       });
     },
     verifyTime(dayTime) {
@@ -360,6 +355,7 @@ export default {
   z-index: 5
 
 .column-wrapper
+  position: relative
   height: 48px
   background-color: var(--default-white)