Распределила из events владельцев событий

src/pages/calendar/components/CalendarBackground.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
-    :class="addScroll"
+    :class="scrollPresence"
     )
     calendar-column(
-      v-for="(owner, index) in columnInformation.owners"
-      :key="owner"
-      :column-information="owner"
+      v-for="(owner, index) in filteredOwners"
+      :key="owner.id"
+      :owner-data="owner"
       :style="calculateColumnPosition(index)"
       )
     .header(:style="backgroundExtendedWidth")
@@ -28,7 +28,7 @@ export default {
   components: { CalendarColumn },
   props: {
     hoursArray: Array,
-    columnInformation: Object,
+    eventsData: Array,
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
   },
   computed: {
     ownersArrayLength() {
-      return this.columnInformation.owners.length;
+      return this.filteredOwners.length;
     },
     backgroundExtendedWidth() {
       if (this.ownersArrayLength > 3) {
@@ -55,11 +55,42 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
-    addScroll() {
+    scrollPresence() {
       return {
         scroll: this.ownersArrayLength > 3,
       };
     },
+    filteredOwners() {
+      let filteredArray = [];
+      let ownerAbsence = {
+        id: null,
+        last_name: null,
+        first_name: null,
+        patronymic: null,
+      };
+      this.eventsData.forEach(({ employees }) => {
+        let findedElement = employees.find((elem) => elem.role === "owner");
+        let emptyObjectPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyObjectPresence) {
+          filteredArray.push(ownerAbsence);
+        }
+        if (findedElement) {
+          let ownerPresence = this.findObjectInArray(
+            filteredArray,
+            findedElement.employee
+          );
+          if (!ownerPresence) {
+            filteredArray.push(findedElement.employee);
+          }
+        }
+      });
+      return filteredArray.sort(
+        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      );
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -80,6 +111,11 @@ export default {
     calculateBackgroundWidth() {
       this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
     },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
   },
   mounted() {
     this.calculateBackgroundWidth();

src/pages/calendar/components/CalendarColumn.vue

@@ -3,7 +3,7 @@
     .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")
-        span.owner-name.font-medium.text-base.mr-6 {{ columnInformation }}
+        span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     div
@@ -15,7 +15,18 @@ export default {
   name: "CalendarColumn",
   components: { BaseDocOkButton },
   props: {
-    columnInformation: String,
+    ownerData: Object,
+  },
+  computed: {
+    ownerName() {
+      if (this.ownerData.id) {
+        return `${this.ownerData.last_name} ${this.ownerData.first_name.slice(
+          0,
+          1
+        )}.${this.ownerData.patronymic.slice(0, 1)}.`;
+      }
+      return null;
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarSchedule.vue

@@ -17,7 +17,7 @@
           )
       calendar-background(
         :hours-array="hoursArray"
-        :column-information="columnInformation"
+        :events-data="eventsData"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"
@@ -54,10 +54,10 @@ export default {
         return {};
       },
     },
-    columnInformation: {
-      type: Object,
+    eventsData: {
+      type: Array,
       default() {
-        return {};
+        return [];
       },
     },
   },
@@ -219,7 +219,7 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
-  width: calc(100% - 8px)
+  width: calc(100% - 80px)
 
 .time-line-indicator
   width: calc(100% - 80px)