Изменила архитектуру проекта

src/pages/calendar/TheCalendar.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+  form-add-event
+</template>
+
+<script>
+  import FormAddEvent from './components/FormAddEvent.vue';
+  export default {
+    name: "TheCalendar",
+    components: {FormAddEvent}
+  }
+</script>

src/pages/calendar/components/FormAddEvent.vue

@@ -0,0 +1,221 @@
+<template lang="pug">
+  .event-form-change(v-if="formOpen")
+    .form-item-container
+      .close-icon-position
+        span.title-form Ответственный
+        .icon-cancel.close-icon(@click="closeEventForm")
+      .input-container(@click="openSelectResponsible")
+        .form-select
+          .form-item-input.select-container-res {{eventData.responsible}}
+            .option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
+              .option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
+        .select-form-separator
+        .icon-down-arrow.arrow-icon
+    .form-item-container
+      span.title-form Оновная информация
+      .form-inform-container
+        .icon-time.container-icon
+        .time-input-container
+          .input-container
+            input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          span —
+          .input-container
+            input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+      .form-inform-container
+        .icon-person.container-icon
+        .input-container
+          input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+    .form-item-container(class='additional-information')
+      .form-inform-container
+        span.title-form Дополнительная информация
+        button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
+      .form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
+        span.number-additional {{info}}
+        .input-container
+          input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+    .form-item-container
+      span.title-form Вид события
+      .input-container(@click="openSelectKindEvent")
+        .form-select
+          .form-item-input.select-container-kind {{eventData.kindEvent}}
+            .option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
+              .option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
+        .select-form-separator
+        .icon-down-arrow.arrow-icon
+    .form-item-container
+      .form-inform-container
+        span.title-form Контакты
+        button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
+      .form-inform-container(v-for="(contact, index) in listContacts" :key="index")
+        .icon-mail.container-icon
+        .input-container
+          input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+    add-event-button(@click="createEvent")
+</template>
+
+<script>
+import AddEventButton from "@/components/base/buttons/AddEventButton";
+import ButtonPlus from "@/components/base/buttons/ButtonPlus";
+export default {
+  name: "FormChangeEvent",
+  components: {AddEventButton, ButtonPlus},
+  props: {
+    listResponsible: {
+      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
+    }
+  },
+  data() {
+    return {
+      formOpen: true,
+      selectResponsibleOpen: false,
+      selectKindEventOpen: false,
+      listFriendInfo: [1],
+      listContacts: [1],
+      kindEvents: ["Встреча", "Планерка", "Интервью","Важная работа"],
+      eventData: {
+        responsible: "Выберите ответственного",
+        eventClient: "",
+        timeEvent: {
+          firstTime: "11:00",
+          secondTime: "12:30",
+        },
+        friendInfo: {},
+        kindEvent: "Вид события",
+        contacts: {}
+      }
+    }
+  },
+  methods: {
+    createEvent() {
+      this.formOpen = !this.formOpen
+    },
+    addFriendInfo(e) {
+      if(e.currentTarget.id === "addInfo") {
+        this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
+      }
+      if(e.currentTarget.id === "addContact") {
+        this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
+      }
+    },
+    closeEventForm() {
+      this.formOpen=!this.formOpen
+    },
+    openSelectResponsible() {
+      this.selectResponsibleOpen = !this.selectResponsibleOpen
+    },
+    openSelectKindEvent() {
+      this.selectKindEventOpen = !this.selectKindEventOpen
+    },
+    chooseOption(event) {
+      if(event.currentTarget.id === "responsible") {
+        this.eventData.responsible=this.listResponsible[event.target.id]
+      }
+      if(event.currentTarget.id === "kind") {
+        this.eventData.kindEvent=this.kindEvents[event.target.id]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+  .event-form-change
+    position: relative
+    display: flex
+    flex-direction: column
+    height: fit-content
+    row-gap: 24px
+    min-width: 448px
+    padding: 21px 32px 24px 32px
+    background-color: var(--bg-white-color)
+    box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
+    border-radius: 4px
+  .title-form
+    font-size: 12px
+    line-height: 14px
+    font-style: normal
+    opacity: 0.4
+  .form-item-container
+    display: flex
+    flex-direction: column
+    row-gap: 8px
+  .input-container
+    display: flex
+    column-gap: 8px
+    align-items: center
+    cursor: pointer
+    border-radius: 4px
+    padding: 8px 16px 8px 16px
+    width: fit-content
+    background-color: var(--bg-ligth-blue-color)
+  .form-item-input
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-size: 16px
+    appearance: none
+    border: none
+    outline: none
+    cursor: pointer
+    color: rgba(9, 10, 21, 0.5)
+    background-color: rgba(9, 10, 21, 0)
+    &::-webkit-calendar-picker-indicator
+      display: none
+      -webkit-appearance: none
+  .select-form-separator
+    background-color: rgba(65, 105, 225, 0.2)
+    height: 24px
+    width: 1px
+    border-radius: 1px
+  .time-input-container
+    display: flex
+    align-items: center
+    column-gap: 8px
+  .form-inform-container
+    display: flex
+    align-items: center
+    column-gap: 16px
+  .number-additional
+    margin-left: 6px
+  .arrow-icon
+    margin-bottom: -12px
+    text-align: center
+    font-size: 14px
+    color: var(--font-dark-blue-color)
+    &:hover
+      color: var(--btn-blue-color)
+  .container-icon
+    width: 24px
+    height: 24px
+    font-size: 21px
+    color: var(--font-dark-blue-color)
+  .close-icon
+    cursor: pointer
+    font-size: 14px
+    color: var(--font-dark-blue-color)
+    &:hover
+      color: var(--btn-blue-color)
+  .close-icon-position
+    display: flex
+    justify-content: space-between
+    padding-top: 10px
+  .form-select
+    position: relative
+    display: flex
+    flex-direction: column
+  .option-container
+    position: absolute
+    width: max-content
+    background-color: var(--bg-ligth-blue-color)
+    z-index: 3
+  .option-item
+    color: var(--font-black-color)
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-size: 16px
+    &:hover
+      background-color: var(--btn-blue-color)
+  .select-container-res
+    min-width: 205px
+  .select-container-kind
+    min-width: 119px
+</style>

src/pages/home/TheHome.vue

@@ -0,0 +1,9 @@
+<template lang="pug">
+  div HomePage
+</template>
+
+<script>
+  export default {
+    name: "TheHome"
+  }
+</script>

src/pages/settings/TheSettings.vue

@@ -0,0 +1,9 @@
+<template lang="pug">
+  div SettingsPage
+</template>
+
+<script>
+  export default {
+    name: "TheSettings"
+  }
+</script>

src/pages/user/TheUser.vue

@@ -0,0 +1,9 @@
+<template lang="pug">
+  div UserPage
+</template>
+
+<script>
+  export default {
+    name: "TheUser"
+  }
+</script>