Сделала header CalendarColumn

src/assets/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8385 5.34315C15.028 5.71146 15.4802 5.85641 15.8486 5.6669C16.2169 5.47738 16.3618 5.02517 16.1723 4.65685L14.8385 5.34315ZM5 21H4.25C4.25 21.4142 4.58579 21.75 5 21.75V21ZM19 21V21.75C19.4142 21.75 19.75 21.4142 19.75 21H19ZM19 11H19.75C19.75 10.5858 19.4142 10.25 19 10.25V11ZM5 11V10.25C4.58579 10.25 4.25 10.5858 4.25 11H5ZM8.75 11V7H7.25V11H8.75ZM8.75 7C8.75 6.45335 8.92016 5.61668 9.40865 4.93823C9.8696 4.29802 10.6444 3.75 12 3.75V2.25C10.1556 2.25 8.9304 3.03532 8.19135 4.06177C7.47984 5.04998 7.25 6.21332 7.25 7H8.75ZM12 3.75C13.5991 3.75 14.4125 4.51517 14.8385 5.34315L16.1723 4.65685C15.5181 3.38547 14.2215 2.25 12 2.25V3.75ZM5 21.75H19V20.25H5V21.75ZM19.75 21V11H18.25V21H19.75ZM4.25 11V21H5.75V11H4.25ZM8 10.25H5V11.75H8V10.25ZM19 10.25H8V11.75H19V10.25Z" fill="#252850"/>
+</svg>

src/components/base/buttons/BaseDocOkButton.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
+    span(v-if="numberIsVisible") 3
+    .icon-doc-ok.text-xxl
+</template>
+
+<script>
+export default {
+  name: "DocOkButton",
+  data() {
+    return {
+      numberIsVisible: false,
+      isDisable: true,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.disable
+  opacity: 0.5
+
+.icon-wrap
+  height: 32px
+  background-color: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-2)
+  &:active
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.icon-doc-ok
+  width: 24px
+  height: 24px
+</style>

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")