WIP Сделала колонки

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -2,22 +2,31 @@
   .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-columns
-      .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>
 import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
-import CalendarColumns from "@/pages/newCalendar/components/CalendarColumns.vue";
+import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
 import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
@@ -25,18 +34,32 @@ export default {
     CalendarHeader,
     CalendarBackground,
     CalendarClockColumn,
-    CalendarColumns,
+    CalendarColumn,
   },
   props: {
     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>