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

src/components/base/buttons/BaseDocOkButton.vue

@@ -1,37 +0,0 @@
-<template lang="pug">
-  button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
-    span(v-if="numberIsVisible") 3
-    .icon-doc-ok.text-xxl
-</template>
-
-<script>
-export default {
-  name: "DocOkButton",
-  data() {
-    return {
-      numberIsVisible: false,
-      isDisable: true,
-    };
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.disable
-  opacity: 0.5
-
-.icon-wrap
-  height: 32px
-  background-color: var(--btn-blue-color-1)
-  color: var(--btn-blue-color)
-  border-radius: 4px
-  &:hover
-    background-color: var(--btn-blue-color-2)
-  &:active
-    background-color: var(--font-dark-blue-color)
-    color: var(--default-white)
-
-.icon-doc-ok
-  width: 24px
-  height: 24px
-</style>

src/pages/calendar/TheCalendar.vue

@@ -25,8 +25,8 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "8:00",
-        dayEndTime: "13:00",
+        dayStartTime: "0 :00",
+        dayEndTime: "16:00",
       },
       eventsData: [],
       teamData: [],

src/pages/calendar/components/CalendarColumn.vue

@@ -3,11 +3,12 @@
     .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         base-avatar.mr-2(:size="32")
-          img(src="@/assets/images/team-member.svg" alt="Team member")
+          img(:src="ownerData.avatar" alt="Team member" v-if="ownerData.avatar")
+          span(v-if="!ownerData.avatar") {{ defaultAvatar }}
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-button.btn(left-icon="icon-doc-ok", :icon-left-size="24", :size="32", secondary)
-    .body
+    .body.pl-1
       calendar-event-card(
         v-for="event in dayEvents"
         :key="event.id"
@@ -44,6 +45,9 @@ export default {
       }
       return null;
     },
+    defaultAvatar() {
+      return `${this.ownerData.last_name[0]}${this.ownerData.first_name[0]}`;
+    },
     pixelsPerMinute() {
       return this.pixelsPerHour / 60;
     },

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)