WIP Переместила форму, добавила click-outside

src/pages/calendar/TheCalendar.vue

@@ -13,18 +13,26 @@
       :events-data="eventsData"
       :members-data="membersData"
       :sidebar-width="sidebarWidth"
-      :close-form-create-event="closeFormCreateEvent"
-      :is-open-form="isOpenForm"
       :event-types="eventTypes"
       :change-form-was-closed="changeFormWasClosed"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
       @open-change-form="openFormCreateEvent"
-      @update-events="fetchEventsData"
-      @close-change-form="setChangeFormState"
       @reset-change-form="resetChangeFormState"
+      @selected-event="writeEventData"
     )
+    calendar-form-add-event(
+        v-if="isOpenForm"
+        :close-form="closeFormCreateEvent"
+        :owners-data="employeesData"
+        :members-data="membersData"
+        :selected-event-data="selectedEvent"
+        :event-types="eventTypes"
+        @clear-selected-event-data="clearSelectedEvent"
+        @update-events="fetchEventsData"
+        @close-change-form="setChangeFormState"
+      )
 </template>
 
 <script>
@@ -32,17 +40,20 @@ import { fetchWrapper } from "../../shared/fetchWrapper.js";
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
+import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
 export default {
   name: "TheCalendar",
   components: {
     CalendarSchedule,
     CalendarSidebar,
+    CalendarFormAddEvent,
   },
   data() {
     return {
       sidebarWidth: "72px",
       calendarLayout: "",
       currentDate: moment(),
+      selectedEvent: {},
       timeInformation: {
         dayStartTime: "08:00",
         dayEndTime: "20:00",
@@ -107,6 +118,13 @@ export default {
     resetChangeFormState() {
       this.changeFormWasClosed = false;
     },
+    writeEventData(eventData) {
+      this.selectedEvent = eventData;
+      this.openFormCreateEvent();
+    },
+    clearSelectedEvent() {
+      this.selectedEvent = {};
+    },
   },
   mounted() {
     this.fetchPersonsData();