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

src/pages/newCalendar/components/CalendarBackground.vue

@@ -19,8 +19,7 @@ export default {
     timeCount() {
       return (
         this.workingHours.end.split(":")[0] -
-        this.workingHours.start.split(":")[0] +
+        this.workingHours.start.split(":")[0]
-        1
       );
     },
   },

src/pages/newCalendar/components/CalendarColumn.vue

@@ -8,7 +8,8 @@
         v-for="record in filteredRecords",
         :key="record?.id",
         :record="record",
-        :expanded-type="expandedDisplayType"
+        :expanded-type="expandedDisplayType",
+        :style="eventCardPosition(record.start, record.end)"
       )
     .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
       span.text-smm.color-grey 0 записей
@@ -18,12 +19,20 @@
 import * as moment from "moment/moment";
 import { recordList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
+import { verifyTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
 export default {
   name: "CalendarColumn",
   components: { CalendarRecordCard },
   props: {
     date: Object,
     expandedDisplayType: Boolean,
+    dayEndTime: Number,
+    dayStartTime: Number,
+  },
+  data() {
+    return {
+      pixelsPerHour: 76,
+    };
   },
   computed: {
     filteredRecords() {
@@ -33,11 +42,37 @@ export default {
           this.date.format("YYYY-MM-DD")
       );
     },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
   },
   methods: {
     transformDayName(name) {
       return name[0]?.toUpperCase() + name?.slice(1);
     },
+    eventCardPosition(startTime, endTime) {
+      let start = startTime
+        .slice(11, -4)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let end = endTime.slice(11, -4);
+      let position =
+        (start[0] - this.dayStartTime) * this.pixelsPerHour +
+        start[1] * this.pixelsPerMinute +
+        4;
+      if (
+        parseInt(start[0], 10) < this.dayStartTime ||
+        verifyTime(end) > this.dayEndTime
+      ) {
+        return {
+          top: "0px",
+          visibility: "hidden",
+        };
+      }
+      return {
+        top: `${position}px`,
+      };
+    },
   },
 };
 </script>
@@ -45,7 +80,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   border-right: 1px solid var(--border-light-grey-color)
-  width: 380px
   &:last-child
     border-right: none
 

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .card-wrapper.w-full.flex.gap-y-2px.flex-col
+  .card-wrapper.flex.gap-y-2px.flex-col.absolute
     .header.w-full.flex.gap-x-2px.text-sm
       .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
         span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
@@ -16,19 +16,16 @@
           @click="changeTimeDisplay(true)"
         )
       .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
-        :class="{'pl-6px': expandedTime}"
+        :class="{'pl-6px collapsed-name': expandedTime}"
-      )
-        .flex.items-center(
-          :class="{'collapsed-name': expandedTime}"
       ) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
         .gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")  
       .info-block.justify-center
         img.w-5.h-5(:src="recordingStatus?.icon")
       .last-item.info-block.justify-center(v-if="expandedType")
         img.w-5.h-5(:src="medicalСardStatus?.icon")
-    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.py-10px.color-grey(
+    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.color-grey(
       :style="bodyHeight",
-      :class="{'py-6px': collapsedDisplayCondition}"
+      :class="bodyPadding"
     )
       .flex.gap-x-14(:class="bodyClass")
         .flex.gap-x-2.items-center(
@@ -59,7 +56,7 @@ export default {
   },
   data() {
     return {
-      pixelsPerHalfHour: 33,
+      pixelsPerHalfHour: 38,
       servicesCount: 4,
       trimPatientName: trimName,
       expandedTime: false,
@@ -113,7 +110,7 @@ export default {
       let halfHourCount = parseInt(this.recordDuration / 30, 10) - 1;
       if (halfHourCount)
         return {
-          height: `${36 + 40 * (halfHourCount - 1)}px`,
+          height: `${this.pixelsPerHalfHour * halfHourCount}px`,
         };
       return {
         display: "none",
@@ -140,6 +137,15 @@ export default {
         collapsed: true,
       };
     },
+    bodyPadding() {
+      return this.collapsedDisplayCondition
+        ? {
+            "py-6px": true,
+          }
+        : {
+            "py-10px": true,
+          };
+    },
   },
   methods: {
     changeTimeDisplay(value) {
@@ -155,6 +161,8 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.card-wrapper
+  width: calc(100% - 8px)
 .header
   height: 30px
   & > div
@@ -169,7 +177,6 @@ export default {
 .collapsed
   width: 30px
 .collapsed-name
-  width: 30px
   overflow: hidden
   white-space: nowrap
 .gradient

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,23 +104,33 @@ 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 {
+      return this.expandedDisplayType
+        ? {
             width: `${380 * this.dateRange.length}px`,
+          }
+        : {
+            width: this.openSidebar
+              ? "calc(100vw - 320px - 80px)"
+              : "calc(100vw - 160px - 80px)",
           };
     },
     backgroundWrapperWidth() {
@@ -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 &&

src/pages/newCalendar/utils/calendarFunctions.js

@@ -7,3 +7,9 @@ export function trimName(lastName, firstName, patronymic) {
   let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
   return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
 }
+
+export function verifyTime(dayTime) {
+  let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+  let newTime = timeArray[1] >= 30 ? timeArray[0] + 1 : timeArray[0];
+  return newTime;
+}

src/store/modules/calendar.js

@@ -4,7 +4,7 @@ const state = () => ({
   currentDate: moment(),
   workingHours: {
     start: "8:00",
-    end: "18:00",
+    end: "19:00",
   },
   selectedDates: {
     from: moment().clone().startOf("week"),