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

server.js

@@ -458,9 +458,9 @@ export function clientsServer() {
         previous: null,
         results: [
           {
-            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-27T11:15:49Z",
-            end: "2022-10-27T12:00:53Z",
+            id: "6fgg6bb6-1de6-422c-a401-1b35cd455303",
+            start: "2022-10-28T11:15:49Z",
+            end: "2022-10-28T12:00:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -502,8 +502,8 @@ export function clientsServer() {
           },
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-27T13:00:49Z",
-            end: "2022-10-27T13:30:53Z",
+            start: "2022-10-28T13:00:49Z",
+            end: "2022-10-28T13:30:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -545,8 +545,8 @@ export function clientsServer() {
           },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-27T15:00:00Z",
-            end: "2022-10-27T16:10:00Z",
+            start: "2022-10-28T15:00:00Z",
+            end: "2022-10-28T16:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -588,8 +588,8 @@ export function clientsServer() {
           },
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-25T17:10:00Z",
-            end: "2022-10-25T18:00:00Z",
+            start: "2022-10-28T17:10:00Z",
+            end: "2022-10-28T18:00:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -631,8 +631,8 @@ export function clientsServer() {
           },
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-27T20:10:00Z",
-            end: "2022-10-27T21:00:00Z",
+            start: "2022-10-28T20:10:00Z",
+            end: "2022-10-28T21:00:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -672,6 +672,49 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "3faa5ff3-3de6-422c-a401-1b35cd455333",
+            start: "2022-10-28T12:30:00Z",
+            end: "2022-10-28T15:30:00Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
+                person: {
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: null,
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: "owner",
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");

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)