Сделала 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>