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

server.js

@@ -515,8 +515,8 @@ export function clientsServer() {
         results: [
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-24T20:23:49Z",
+            start: "2022-10-25T11:15:49Z",
-            end: "2022-10-24T21:23:53Z",
+            end: "2022-10-25T12:00:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -542,7 +542,7 @@ export function clientsServer() {
                   first_name: "Ольга",
                   patronymic: "Александровна",
                 },
-                role: null,
+                role: "owner",
               },
               {
                 id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
@@ -552,14 +552,14 @@ export function clientsServer() {
                   first_name: "Егор",
                   patronymic: "Сергеевич",
                 },
-                role: "owner",
+                role: null,
               },
             ],
           },
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-24T15:23:49Z",
+            start: "2022-10-25T13:00:49Z",
-            end: "2022-10-24T16:23:53Z",
+            end: "2022-10-25T13:30:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -599,63 +599,10 @@ export function clientsServer() {
               },
             ],
           },
-          {
-            id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
-            start: "2022-10-23T10:00:00Z",
-            end: "2022-10-23T11:10:00Z",
-            kind: "call",
-            subkind: null,
-            description: "",
-            location: null,
-            members: [
-              {
-                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
-                person: {
-                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
-                  last_name: "Гагарин",
-                  first_name: "Юрий",
-                  patronymic: "Алексеевич",
-                },
-                role: null,
-              },
-              {
-                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
-                person: {
-                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
-                  last_name: "Елесеевская",
-                  first_name: "Татьяна",
-                  patronymic: "Ивановна",
-                },
-                role: "primary",
-              },
-            ],
-            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",
-              },
-            ],
-          },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-24T10:00:00Z",
+            start: "2022-10-25T15:00:00Z",
-            end: "2022-10-24T11:10:00Z",
+            end: "2022-10-25T16:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -695,10 +642,11 @@ export function clientsServer() {
               },
             ],
           },
+
           {
-            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
+            id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-24T10:00:00Z",
+            start: "2022-10-25T17:10:00Z",
-            end: "2022-10-24T11:10:00Z",
+            end: "2022-10-25T18:00:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -717,14 +665,14 @@ export function clientsServer() {
             ],
             employees: [
               {
-                id: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
                 employee: {
-                  id: "dv841a15-e867-331f-a658-6325de7c311e",
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
-                  last_name: "Коломойцев",
+                  last_name: "Константинопольская",
-                  first_name: "Илья",
+                  first_name: "Юлия",
-                  patronymic: "Петрович",
+                  patronymic: "Викторовна",
                 },
-                role: "owner",
+                role: null,
               },
               {
                 id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
@@ -734,7 +682,7 @@ export function clientsServer() {
                   first_name: "Ольга",
                   patronymic: "Александровна",
                 },
-                role: null,
+                role: "owner",
               },
             ],
           },

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() {