diff --git a/src/pages/newCalendar/components/CalendarBackground.vue b/src/pages/newCalendar/components/CalendarBackground.vue
index 0a89d16..0b729b4 100644
--- a/src/pages/newCalendar/components/CalendarBackground.vue
+++ b/src/pages/newCalendar/components/CalendarBackground.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .w-full.flex.flex-col
+  .flex.flex-col
     .line-wrapper
       .line.flex.items-center(
         v-for="hour in timeCount",
diff --git a/src/pages/newCalendar/components/CalendarColumn.vue b/src/pages/newCalendar/components/CalendarColumn.vue
index e43f3b8..de3d2ff 100644
--- a/src/pages/newCalendar/components/CalendarColumn.vue
+++ b/src/pages/newCalendar/components/CalendarColumn.vue
@@ -1,24 +1,25 @@
 <template lang="pug">
   .calendar-column-wrapper.flex.flex-col
-    .header.flex.flex-col.items-center.justify-center.top-0
-      span.font-bold.text-base.color-black 24 мая
-      span.text-smm.color-grey Понедельник
+    .header.flex.flex-col.items-center.justify-center.top-0.pt-3.pb-10px
+      span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
+      span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
+    .body.h-full
+    .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
+      span.text-smm.color-grey 0 записей
 </template>
 
 <script>
-import { mapState } from "vuex";
 export default {
   name: "CalendarColumn",
-  props: {},
-  data() {
-    return {};
+  props: {
+    date: Object,
+    expandedDisplayType: Boolean,
   },
-  computed: {
-    ...mapState({
-      today: (state) => state.calendar.currentDate,
-    }),
+  methods: {
+    transformDayName(name) {
+      return name[0]?.toUpperCase() + name?.slice(1);
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -26,9 +27,10 @@ export default {
 .calendar-column-wrapper
   border-right: 1px solid var(--border-light-grey-color)
   width: 380px
+  &:last-child
+    border-right: none
 
 .header
-  height: 60px
   position: sticky
   z-index: 5
   background-color: var(--default-white)
@@ -42,4 +44,7 @@ export default {
 
 .color-grey
   color: var(--font-grey-color)
+
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
 </style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 27320d0..1f082ce 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -53,7 +53,7 @@
       ) 
     .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
       q-btn-toggle(
-        v-model="displayType",
+        v-model="value",
         :options="displayTypesList",
         no-caps,
         toggle-color="light-blue-4",
@@ -63,24 +63,24 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-//import * as moment from "moment/moment";
 import BaseCalendar from "@/components/base/BaseCalendar";
 import { mapState, mapActions } from "vuex";
+import { v_model } from "@/shared/mixins/v-model";
 export default {
   name: "CalendarHeader",
+  mixins: [v_model],
   components: { BaseInput, BaseCalendar },
   data() {
     return {
-      displayType: "collapsed",
       displayTypesList: [
-        {
-          label: "col",
-          value: "collapsed",
-        },
         {
           label: "exp",
           value: "expanded",
         },
+        {
+          label: "col",
+          value: "collapsed",
+        },
       ],
       date: {
         from: null,
@@ -98,9 +98,6 @@ export default {
     ...mapState({
       selectedDates: (state) => state.calendar.selectedDates,
     }),
-    ...mapActions({
-      changeSelectedDates: "changeSelectedDates",
-    }),
   },
   methods: {
     previousWeek() {
@@ -111,27 +108,22 @@ export default {
       this.date.from = this.date.from.clone().add(1, "week");
       this.date.to = this.date.to.clone().add(1, "week");
     },
+    ...mapActions({
+      changeSelectedDates: "changeSelectedDates",
+    }),
   },
-  /*watch: {
-    selectedDates: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        console.log("в сторе", val);
-      },
-    },
+  watch: {
     date: {
-      immediate: true,
       deep: true,
       handler(val) {
-        console.log("в компоненте", val);
+        if (
+          !this.date?.from.isSame(this.selectedDates?.from) &&
+          !this.date?.to.isSame(this.selectedDates?.to)
+        )
+          this.changeSelectedDates(val);
       },
     },
-    calendarVisibility(val) {
-      console.log(val, this.changeSelectedDates);
-      if (val === false) this.changeSelectedDates(this.date);
-    },
-  },*/
+  },
   mounted() {
     this.date = {
       from: this.selectedDates.from.clone(),
diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
index 8c12a73..c045171 100644
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -1,16 +1,25 @@
 <template lang="pug">
-  .schedule.flex-1.flex.flex-col(
+  .schedule.flex-1.flex.flex-col.relative(
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
-    calendar-header.w-full.mb-1
+    calendar-header.w-full.mb-1(v-model="displayType")
     .schedule-body.h-full.bg-white.w-full
-      .column-wrapper.flex.ml-20(:style="{width: '3040px'}")
-        calendar-column
-      .flex.w-full.relative.margin
+      .column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
+        calendar-column(
+          v-for="date in dateRange",
+          :key="date",
+          :date="date",
+          :style="columnSize",
+          :expanded-display-type="expandedDisplayType"
+        )
+      .flex.relative(
+        :style="expandedDisplayType ? backgroundWrapperWidth : {}",
+        :class="{'border-bottom': expandedDisplayType}"
+      )
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
-        calendar-background
-    .w-full.h-3.bg-white.footer
+        calendar-background.flex-1
+    .w-full.h-3.bg-white.footer(v-if="expandedDisplayType")
 </template>
 
 <script>
@@ -31,12 +40,26 @@ export default {
     openSidebar: Boolean,
   },
   data() {
-    return {};
+    return {
+      displayType: "expanded",
+    };
   },
   computed: {
     ...mapState({
       workingHours: (state) => state.calendar.workingHours,
+      selectedDates: (state) => state.calendar.selectedDates,
     }),
+    expandedDisplayType() {
+      return this.displayType === "expanded";
+    },
+    dateRange() {
+      let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
+      let range = [];
+      for (let i = 0; i <= diff; i++) {
+        range.push(this.selectedDates?.from.clone().add(i, "day"));
+      }
+      return range;
+    },
     validateStartTime() {
       return this.verifyTime(this.workingHours.start);
     },
@@ -50,6 +73,25 @@ export default {
       }
       return time;
     },
+    columnSize() {
+      return this.expandedDisplayType
+        ? {
+            height: `${this.timeCoil.length * 76 + 60}px`,
+          }
+        : {
+            height: `${this.timeCoil.length * 76 + 96}px`,
+          };
+    },
+    columnWrapperWidth() {
+      return {
+        width: `${380 * this.dateRange.length}px`,
+      };
+    },
+    backgroundWrapperWidth() {
+      return {
+        width: `${380 * this.dateRange.length + 80}px`,
+      };
+    },
   },
   methods: {
     verifyTime(dayTime) {
@@ -63,7 +105,6 @@ export default {
 
 <style lang="sass" scoped>
 .schedule-body
-  width: 100%
   overflow-x: auto
   border-top-left-radius: 4px
   border-top-right-radius: 4px
@@ -80,6 +121,7 @@ export default {
   padding-top: 38px
 
 .column-wrapper
+  height: 60px
   position: relative
   background-color: var(--default-white)
 
@@ -87,6 +129,14 @@ export default {
   border-bottom-left-radius: 4px
   border-bottom-right-radius: 4px
 
-.margin
+.border-bottom
   border-bottom: 4px solid var(--bg-ligth-blue-color)
+
+.records-count
+  border-right: 1px solid var(--border-light-grey-color)
+  &:last-child
+    border-right: none
+
+.border-top
+  border-top: 1px solid var(--border-light-grey-color)
 </style>
diff --git a/src/pages/oldCalendar/TheCalendar.vue b/src/pages/oldCalendar/TheCalendar.vue
index caa3a1d..6a6fd5b 100644
--- a/src/pages/oldCalendar/TheCalendar.vue
+++ b/src/pages/oldCalendar/TheCalendar.vue
@@ -51,7 +51,7 @@ import CalendarSidebar from "./components/CalendarSidebar.vue";
 import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import CalendarDeleteModal from "./components/CalendarDeleteModal.vue";
-import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";
+import { statusesConfig } from "@/pages/oldCalendar/utils/statusesConfig";
 
 export default {
   name: "TheCalendar",
diff --git a/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue b/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue
index f12f1b3..51ac05f 100644
--- a/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue
+++ b/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";
+import { statusesConfig } from "@/pages/oldCalendar/utils/statusesConfig";
 
 export default {
   name: "CalendarEventDescriptionCard",
diff --git a/src/pages/oldCalendar/components/CalendarFormAddEvent.vue b/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
index c0ee584..26a7e66 100644
--- a/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
@@ -82,7 +82,7 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 import * as moment from "moment/moment";
 import BaseModal from "@/components/base/BaseModal.vue";
 import { v_model } from "@/shared/mixins/v-model";
-import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";
+import { statusesConfig } from "@/pages/oldCalendar/utils/statusesConfig";
 
 export default {
   name: "FormChangeEvent",
diff --git a/src/store/modules/calendar.js b/src/store/modules/calendar.js
index da648d4..373f41a 100644
--- a/src/store/modules/calendar.js
+++ b/src/store/modules/calendar.js
@@ -7,8 +7,8 @@ const state = () => ({
     end: "18:00",
   },
   selectedDates: {
-    from: moment(),
-    to: moment().clone().add(6, "day"),
+    from: moment().clone().startOf("week"),
+    to: moment().clone().endOf("week"),
   },
 });