Сделала колонку, добавила данные в server.js

server.js

@@ -35,6 +35,46 @@ export function clientsServer() {
           },
         ],
       }));
+      this.get("/registry/event/", () => ({
+        count: 1,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
+            start: "2022-10-20T20:23:49Z",
+            end: "2022-10-20T21:23:53Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                person: {
+                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  last_name: "Гагарин",
+                  first_name: "Юрий",
+                  patronymic: "Алексеевич",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db831a14-e836-481f-a653-6325de7c311e",
+                  last_name: "Жмыхов",
+                  first_name: "Егор",
+                  patronymic: "Сергеевич",
+                },
+                role: "owner",
+              },
+            ],
+          },
+        ],
+      }));
       this.passthrough("http://45.84.227.122:8080/**");
     },
   });

src/pages/calendar/TheCalendar.vue

@@ -3,6 +3,7 @@
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
+      :column-information="columnInformation"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -24,6 +25,15 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
+      columnInformation: {
+        owners: [
+          "Захарова А.О.",
+          "Константинопольская Ю.В.",
+          "Коломойцев И.К.",
+          "Ситников А.Г.",
+          null,
+        ],
+      },
     };
   },
   methods: {
@@ -40,7 +50,7 @@ export default {
       this.eventsData = res.results;
     },
     fetchEventsData() {
-      fetch("http://45.84.227.122:8080/registry/event/")
+      fetch("/registry/event/")
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
     },

src/pages/calendar/components/CalendarBackground.vue

@@ -1,6 +1,12 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col
-    .header.flex.items-center.justify-between.py-2.px-6
+    calendar-column(
+      v-for="(owner, index) in columnInformation.owners"
+      :key="owner"
+      :column-information="owner"
+      :style="calculateColumnPosition(index)"
+      )
+    .header
     .body.flex.flex-col
       .line-wrapper
         .line.flex.items-center(
@@ -20,19 +26,23 @@
 
 <script>
 import * as moment from "moment/moment";
+import CalendarColumn from "./CalendarColumn.vue";
 export default {
   name: "CalendarBackground",
+  components: { CalendarColumn },
   props: {
     hoursArray: Array,
     currentTime: String,
     currentDate: Object,
     dayStartTime: Number,
     dayEndTime: Number,
+    columnInformation: Object,
   },
   data() {
     return {
       isShownIndicator: true,
       pixelsPerHour: 62,
+      columnWidth: 470,
     };
   },
   computed: {
@@ -67,6 +77,11 @@ export default {
       }
       return result;
     },
+    calculateColumnPosition(elemIndex) {
+      return {
+        left: `${elemIndex * this.columnWidth}px`,
+      };
+    },
   },
   watch: {
     currentDate: function () {
@@ -80,6 +95,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-background-wrapper
   width: 100%
+  position: relative
 
 .header
   height: 48px

src/pages/calendar/components/CalendarColumn.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col(@click="output")
+    .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 }}
+        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+      base-doc-ok-button
+    .body
+</template>
+
+<script>
+import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+export default {
+  name: "CalendarColumn",
+  components: { BaseDocOkButton },
+  props: {
+    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)
+
+.header
+  height: 48px
+
+.avatar-wrapper
+  width: 32px
+  height: 32px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.owner-name
+  color: var(--font-dark-blue-color)
+</style>

src/pages/calendar/components/CalendarSchedule.vue

@@ -20,6 +20,7 @@
         :current-date="currentDate"
         :day-start-time="validateStartTime"
         :day-end-time="validateEndTime"
+        :column-information="columnInformation"
         )
 </template>
 
@@ -30,7 +31,11 @@ import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
 export default {
   name: "CalendarSchedule",
-  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
+  components: {
+    CalendarHeader,
+    CalendarBackground,
+    CalendarClockColumn,
+  },
   props: {
     currentDate: {
       type: Object,
@@ -44,6 +49,12 @@ export default {
         return {};
       },
     },
+    columnInformation: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {