Сделала header CalendarColumn

src/pages/calendar/TheCalendar.vue

@@ -1,21 +1,29 @@
 <template lang="pug">
-  calendar-header(
-    :currentDay="currentDate"
-    @previous-date="switchPreviousDate"
-    @next-date="switchNextDate"
-    @selectedLayout="changeCalendarLayout")
+  .calendar-container.ml-2
+    calendar-header(
+      :currentDay="currentDate"
+      @previous-date="switchPreviousDate"
+      @next-date="switchNextDate"
+      @selectedLayout="changeCalendarLayout")
+    calendar-column(:info="columnInfo") 
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
+import CalendarColumn from "./components/CalendarColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader },
+  components: { CalendarHeader, CalendarColumn },
   data() {
     return {
       currentDate: moment(),
       calendarLayout: "",
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
     };
   },
   methods: {
@@ -31,3 +39,8 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.calendar-container
+  width: 100%
+</style>

src/pages/calendar/components/CalendarColumn.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+  .calendar-column-wrapper
+    .header.flex.items-center.justify-between.py-2.px-6
+      .flex.items-center
+        img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
+        span.member-name.font-medium.text-base.mr-6 {{ info.name }}
+        img.icon-wrapper(src="@/assets/icons/lock.svg")
+      base-doc-ok-button  
+</template>
+<script>
+import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+export default {
+  name: "CalendarColumn",
+  components: { BaseDocOkButton },
+  props: {
+    info: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  width: 100%
+  background-color: var(--default-white)
+
+.header
+  height: 48px
+
+.avatar-wrapper
+  width: 32px
+  height: 32px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.member-name
+  color: var(--font-dark-blue-color)
+</style>

src/pages/calendar/components/CalendarHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
       base-arrow-button.left-arrow.mr-4(@click="previousHandler")
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")