Распределила из 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();