Доделала карточки

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -4,13 +4,15 @@
   )
     calendar-header.w-full.mb-1(v-model="displayType")
     .schedule-body.h-full.bg-white.w-full
-      .column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
+      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
           v-for="date in dateRange",
           :key="date",
           :date="date",
           :style="columnHeight",
-          :expanded-display-type="expandedDisplayType"
+          :expanded-display-type="expandedDisplayType",
+          :day-start-time="validateStartTime"
+          :day-end-time="validateEndTime"
         )
       .flex.relative(
         :style="expandedDisplayType ? backgroundWrapperWidth : {}",
@@ -40,7 +42,10 @@ import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
 import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
-import { convertTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import {
+  convertTime,
+  verifyTime,
+} from "@/pages/newCalendar/utils/calendarFunctions.js";
 import { mapState } from "vuex";
 import * as moment from "moment/moment";
 export default {
@@ -99,24 +104,34 @@ export default {
       return range;
     },
     validateStartTime() {
-      return this.verifyTime(this.workingHours.start);
+      return verifyTime(this.workingHours.start);
     },
     validateEndTime() {
-      return this.verifyTime(this.workingHours.end);
+      return verifyTime(this.workingHours.end);
     },
     columnHeight() {
       return this.expandedDisplayType
         ? {
             height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
+            width: "380px",
           }
         : {
             height: `${this.timeCoil.length * this.pixelsPerHour + 96}px`,
+            width: this.openSidebar
+              ? `calc((100vw - 320px - 80px) / ${this.dateRange.length})`
+              : `calc((100vw - 160px - 80px) / ${this.dateRange.length})`,
           };
     },
     columnWrapperWidth() {
-      return {
-        width: `${380 * this.dateRange.length}px`,
-      };
+      return this.expandedDisplayType
+        ? {
+            width: `${380 * this.dateRange.length}px`,
+          }
+        : {
+            width: this.openSidebar
+              ? "calc(100vw - 320px - 80px)"
+              : "calc(100vw - 160px - 80px)",
+          };
     },
     backgroundWrapperWidth() {
       return {
@@ -135,17 +150,12 @@ export default {
     },
   },
   methods: {
-    verifyTime(dayTime) {
-      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
-      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
-      return newTime;
-    },
     changeCurrentTime() {
       this.currentTime = moment().format("HH:mm:ss");
     },
     timeCoilInitialization() {
       this.timeCoil = [];
-      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+      for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
         if (
           i === this.hours &&
           this.hours !== this.validateEndTime &&