Подтянула данные из карточки в расписание

src/components/TheHeader.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .header-wrapper.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
     .flex.items-center.box-border.cursor-pointer.mr-auto
-      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg" alt="Logo")
+      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
     //- .charge-person-container
     //-   header-active-client-panel(:info="chargePersonInfo")
@@ -10,8 +10,8 @@
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
-        base-avatar(:size="32").mr-2
-          img(:src="avatarSrc")
+        base-avatar.mr-2(:size="32")
+          img(:src="avatarSrc", alt="Avatar")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
 </template>

src/pages/calendar/TheCalendar.vue

@@ -1,24 +1,22 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth"
+    calendar-sidebar(
+      @width="changeWidth"
       :team-data="employeesData"
-    :open-form-create="openFormCreateEvent")
+      :open-form-create="openFormCreateEvent"
+    )
     calendar-schedule(
       :owners-data="employeesData"
       :current-date="currentDate"
       :time-information="timeInformation"
       :events-data="eventsData"
       :sidebar-width="sidebarWidth"
+      :close-form-create-event="closeFormCreateEvent"
+      :is-open-form="isOpenForm"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
     )
-    calendar-form-add-event(
-      v-if="isOpenForm"
-      :close-form="closeFormCreateEvent"
-      :owners-data="employeesData"
-      :members-data="membersData"
-    )
 </template>
 
 <script>
@@ -82,7 +80,6 @@ export default {
     changeWidth(value) {
       this.sidebarWidth = value;
     },
-
     openFormCreateEvent() {
       this.isOpenForm = true;
     },

src/pages/calendar/components/CalendarColumn.vue

@@ -3,7 +3,11 @@
     .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         base-avatar.mr-2(:size="32", :color="ownerData.color")
-          img(:src="ownerData.avatar" alt="Team member" v-if="ownerData.avatar")
+          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")
@@ -14,6 +18,7 @@
         :key="event.id"
         :ownerEvent="event"
         :style="eventCardPosition(event.start, event.end)"
+        @selected-event="transmitEventData"
       )
 </template>
 
@@ -79,6 +84,9 @@ export default {
         top: `${position}px`,
       };
     },
+    transmitEventData(eventData) {
+      this.$emit("selected-event", eventData);
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
+  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
     .header.flex.justify-between.items-center
       .header-text
         span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -61,6 +61,9 @@ export default {
     composeFullName(object) {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
+    transmitEventData() {
+      this.$emit("selected-event", this.ownerEvent);
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -64,10 +64,17 @@
         :icon-left-size="10"
         id="addContact"
         @click="(e)=>addContact(e)")
-      .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
+      .flex.gap-x-4.items-center(
+        v-for="(contact, index) in listContacts"
+        :key="index"
+      )
         .icon-mail.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.cursor-text.text-base(v-model="contacts" type="text" placeholder="E-mail")
+          input.item-input.cursor-text.text-base(
+            v-model="contacts"
+            type="text"
+            placeholder="E-mail"
+          )
     base-button.styled-button.text-base.font-semibold(
       :size="40"
       :disabled="disabledButton"

src/pages/calendar/components/CalendarSchedule.vue

@@ -19,6 +19,7 @@
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
           :style="columnSize"
+          @selected-event="writeEventData"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
@@ -41,6 +42,12 @@
             :time-coil="timeCoil"
             :owners-count="ownersCount"
           )
+      calendar-form-add-event(
+        v-if="isOpenForm"
+        :close-form="closeFormCreateEvent"
+        :owners-data="ownersData"
+        :members-data="membersData"
+      )
 </template>
 
 <script>
@@ -49,6 +56,7 @@ import CalendarHeader from "./CalendarHeader.vue";
 import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
 import CalendarColumn from "./CalendarColumn.vue";
+import CalendarFormAddEvent from "./CalendarFormAddEvent.vue";
 export default {
   name: "CalendarSchedule",
   components: {
@@ -56,6 +64,7 @@ export default {
     CalendarBackground,
     CalendarClockColumn,
     CalendarColumn,
+    CalendarFormAddEvent,
   },
   props: {
     currentDate: {
@@ -83,6 +92,14 @@ export default {
         return [];
       },
     },
+    membersData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    closeFormCreateEvent: Function,
+    isOpenForm: Boolean,
   },
   data() {
     return {
@@ -94,6 +111,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
+      selectedEvent: {},
     };
   },
   computed: {
@@ -284,6 +302,9 @@ export default {
       });
       return filteredArray;
     },
+    writeEventData(eventData) {
+      this.selectedEvent = eventData;
+    },
   },
   watch: {
     currentTime() {