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

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)