WIP Сделала позиционирование карточек

src/pages/calendar/components/CalendarBackground.vue

@@ -11,6 +11,8 @@
       :owner-data="owner"
       :style="calculateColumnPosition(index)"
       :day-events="filterEventsByOwner(owner)"
+      :day-start-time="dayStartTime"
+      :day-end-time="dayEndTime"
       )
     .body.flex.flex-col(
       :style="backgroundExtendedWidth"
@@ -33,6 +35,8 @@ export default {
     eventsData: Array,
     currentDate: Object,
     sidebarWidth: String,
+    dayStartTime: Number,
+    dayEndTime: Number,
   },
   data() {
     return {
@@ -150,6 +154,7 @@ export default {
 <style lang="sass" scoped>
 .scroll-x
   overflow-x: scroll
+  overflow-y: hidden
 
 .calendar-background-wrapper
   width: 100%

src/pages/calendar/components/CalendarColumn.vue

@@ -11,6 +11,7 @@
         v-for="event in dayEvents"
         :key="event.id"
         :ownerEvent="event"
+        :style="eventCardPosition(event.start, event.end)"
         )
 </template>
 
@@ -23,6 +24,13 @@ export default {
   props: {
     ownerData: Object,
     dayEvents: Array,
+    dayEndTime: Number,
+    dayStartTime: Number,
+  },
+  data() {
+    return {
+      pixelsPerHour: 62,
+    };
   },
   computed: {
     ownerName() {
@@ -34,6 +42,33 @@ export default {
       }
       return null;
     },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
+  },
+  methods: {
+    eventCardPosition(startTime, endTime) {
+      let start = startTime
+        .slice(11, -4)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let end = endTime.slice(11, -6);
+      let position =
+        (start[0] - this.dayStartTime) * this.pixelsPerHour +
+        start[1] * this.pixelsPerMinute;
+      if (
+        parseInt(start[0], 10) < this.dayStartTime ||
+        parseInt(end, 10) > this.dayEndTime
+      ) {
+        return {
+          top: "0px",
+          visibility: "hidden",
+        };
+      }
+      return {
+        top: `${position}px`,
+      };
+    },
   },
 };
 </script>
@@ -47,7 +82,7 @@ export default {
   height: 48px
   position: sticky
   top: 0px
-  z-index: 3
+  z-index: 5
   width: inherit
   border-right: 1px solid var(--border-light-grey-color)
   background-color: var(--default-white)

src/pages/calendar/components/CalendarEventCard.vue

@@ -47,7 +47,7 @@ export default {
   border-radius: 4px
   background-color: var(--bg-event-yellow-color)
   color: var(--font-black-color)
-  position: relative
+  position: absolute
   z-index: 3
 
 .header

src/pages/calendar/components/CalendarSchedule.vue

@@ -22,6 +22,8 @@
         :time-coil="timeCoil"
         :events-data="eventsData"
         :sidebar-width="sidebarWidth"
+        :day-start-time="validateStartTime"
+        :day-end-time="validateEndTime"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"
@@ -193,11 +195,6 @@ export default {
       }
       return result;
     },
-    bodyScheduleHeight() {
-      if (this.scheduleHeight > 855) {
-        return this.scheduleHeight;
-      }
-    },
   },
   watch: {
     currentTime() {