Сделала сжатие колонок при открытом сайдбаре

server.js

@@ -435,6 +435,49 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
+            start: "2022-10-24T10:00:00Z",
+            end: "2022-10-24T11:10: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: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
+                employee: {
+                  id: "dv841a15-e867-331f-a658-6325de7c311e",
+                  last_name: "Коломойцев",
+                  first_name: "Илья",
+                  patronymic: "Петрович",
+                },
+                role: "owner",
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");

src/pages/calendar/components/CalendarBackground.vue

@@ -31,6 +31,7 @@ export default {
     hoursArray: Array,
     eventsData: Array,
     currentDate: Object,
+    sidebarWidth: String,
   },
   data() {
     return {
@@ -102,8 +103,10 @@ export default {
   },
   methods: {
     calculateColumnPosition(elemIndex) {
+      let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
       if (this.ownersArrayLength < 4) {
-        this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
+        this.columnWidth =
+          (this.backgroundWidth - deductible) / this.ownersArrayLength;
         return {
           width: `${this.columnWidth}px`,
           height: `${this.backgroundHeight}px`,

src/pages/calendar/components/CalendarSchedule.vue

@@ -19,6 +19,7 @@
         :current-date="currentDate"
         :hours-array="hoursArray"
         :events-data="eventsData"
+        :sidebar-width="sidebarWidth"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"