Настроила размер карточек по времени

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.cursor-pointer
+  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
     .header.flex.justify-between.items-center
       .header-text
         span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -12,7 +12,15 @@ export default {
   props: {
     ownerEvent: Object,
   },
+  data() {
+    return {
+      pixelsPerHour: 62,
+    };
+  },
   computed: {
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
     eventTime() {
       return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
         this.ownerEvent.end
@@ -28,6 +36,24 @@ export default {
       }
       return this.composeFullName(membersArray[0].person);
     },
+    calculateCardHeight() {
+      let startTime = this.trimTime(this.ownerEvent.start)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      console.log(startTime);
+      let endTime = this.trimTime(this.ownerEvent.end)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      return (
+        (endTime[0] * 60 + endTime[1] - (startTime[0] * 60 + startTime[1])) *
+        this.pixelsPerMinute
+      );
+    },
+    cardHeight() {
+      return {
+        height: `${this.calculateCardHeight - 8}px`,
+      };
+    },
   },
   methods: {
     trimTime(time) {
@@ -42,7 +68,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper
-  width: 100%
+  width: calc(100% - 8px)
   height: 23px
   border-radius: 4px
   background-color: var(--bg-event-yellow-color)