WIP Сделала закрытие DescriptionCard на клик вне

src/pages/calendar/components/CalendarColumn.vue

@@ -16,6 +16,7 @@
       calendar-event-card(
         v-for="event in dayEvents"
         :key="event.id"
+        :id="event.id"
         :ownerEvent="event"
         :event-types="eventTypes"
         :style="eventCardPosition(event.start, event.end)"

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
   .wrapper.cursor-pointer.my-1.relative(
-    @click="transmitEventData",
     :style="themeColors",
     :class="cardTheme"
   )
     .card.flex.px-2(
       :class="{'py-6px flex-col': longCard}",
-      :style="cardHeight"
+      :style="cardHeight",
+      @click="openDescriptionCard"
     )
       .header.flex.justify-between.items-center(:class="{'items-start': longCard}")
         .header-text
@@ -20,12 +20,17 @@
         .col
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
-      calendar-event-description-card.right-0(
-        v-if="isActive"
-        :style="descriptionCardPosition"
-        :owner-event="this.ownerEvent"
-        :event-types="this.eventTypes"
-      )
+    calendar-event-description-card.right-0(
+      v-if="isOpenDescriptionCard"
+      :style="descriptionCardPosition"
+      :owner-event="this.ownerEvent"
+      :event-types="this.eventTypes"
+      :event-time="this.eventTime"
+      :event-member="eventMember"
+      :description="description"
+      @selected-event="transmitEventData"
+      @close-description-card="closeDescriptionCard"
+    )
   </template>
 
 <script>
@@ -47,6 +52,7 @@ export default {
       pixelsPerHour: 62,
       isActive: false,
       someDetailsShown: true,
+      isOpenDescriptionCard: false,
     };
   },
   computed: {
@@ -190,16 +196,29 @@ export default {
     composeFullName(object) {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
-    transmitEventData() {
-      this.changeTheme();
-      this.$emit("selected-event", this.ownerEvent);
-    },
     changeTheme() {
       this.isActive = !this.isActive;
     },
     changeDetailsShown() {
       this.someDetailsShown = false;
     },
+    transmitEventData() {
+      this.$emit("selected-event", this.ownerEvent);
+      this.hideDescriptionCard();
+    },
+    hideDescriptionCard() {
+      this.isOpenDescriptionCard = false;
+    },
+    openDescriptionCard() {
+      if (!this.isOpenDescriptionCard && !this.isActive) {
+        this.isOpenDescriptionCard = true;
+        this.changeTheme();
+      }
+    },
+    closeDescriptionCard() {
+      this.hideDescriptionCard();
+      this.changeTheme();
+    },
   },
 };
 </script>
@@ -216,6 +235,8 @@ export default {
     background-color: var(--bg-color)
     border: 2px solid var(--border-color)
     border-left: 4px solid var(--bg-active)
+  .card:hover
+      background-color: var(--bg-hover)
   .header-text, .body
     color: var(--font-color)
   .details-count
@@ -240,19 +261,6 @@ export default {
 .card
   border-radius: 4px
   min-height: 23px
-  &:hover
-    background-color: var(--bg-hover)
-    border: 2px solid var(--border-color)
-    border-left: 4px solid var(--bg-active)
-  &:hover .header-text
-    color: var(--font-color)
-  &:hover .details-count
-    background-color: var(--bg-active)
-    color: var(--font-active-color)
-  &:hover .body
-    color: var(--font-color)
-  &:hover li:before
-    background-color: var(--font-color)
 
 .header
   width: 100%

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -1,5 +1,23 @@
 <template lang="pug">
-  .wrapper.px-4.pt-14px.pb-4.font-medium
+  .wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
+    :style="typeColor",
+    v-click-outside="close"
+  )
+    .flex.justify-between.items-center.mb-2
+      .flex
+        span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
+        .type.text-xxs.px-14px.py-1(v-if="isCertainType")
+          span.type-text {{ ownerEvent.kind }}
+      .right-side.flex.gap-x-4.text-sm
+        .icon-basket.flex.items-center.cursor-pointer
+        .icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
+        .icon-cancel.text-xxs.flex.items-center.cursor-pointer(@click="close")
+    .body.mr-6
+      span.text-base  {{ eventMember }}
+      .flex.text-xxs.mt-4.justify-between
+        .column
+          ul
+            li(v-for="elem in description" :key="elem") {{ elem }}
 </template>
 
 <script>
@@ -13,15 +31,108 @@ export default {
         return [];
       },
     },
+    eventTime: {
+      type: String,
+      default: "",
+    },
+    eventMember: {
+      type: String,
+      default: "",
+    },
+    description: Array,
+  },
+  data() {
+    return {
+      isCertainType: true,
+    };
+  },
+  computed: {
+    typeColor() {
+      switch (this.ownerEvent.kind) {
+        case this.eventTypes[0].label:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--font-color": this.eventTypes[0].color,
+          };
+        case this.eventTypes[1].label:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
+            "--font-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].label:
+          return {
+            "--bg-color": "var(--bg-event-yellow-color-0)",
+            "--font-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[3].label:
+          return {
+            "--bg-color": "var(--bg-event-blue-color-0)",
+            "--font-color": this.eventTypes[3].color,
+          };
+        default:
+          this.changeType();
+          return {};
+      }
+    },
+  },
+  methods: {
+    changeType() {
+      this.isCertainType = false;
+    },
+    transmitEventData() {
+      this.$emit("selected-event");
+    },
+    close() {
+      this.$emit("close-description-card");
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper
-  width: 426px
+  height: auto !important
   background-color: var(--default-white)
   border-radius: 4px
   color: var(--font-black-color)
   box-shadow: var(--default-shadow)
+
+.type
+  background-color: var(--bg-color)
+  border-radius: 4px
+
+.type-text
+  color: var(--font-color)
+
+.right-side
+  height: 16px
+  color: var(--btn-blue-color)
+
+.icon-basket
+  color: var(--border-red-color)
+
+.column
+  max-width: calc(462px/2 - 36px)
+
+ul
+  list-style-type: none
+  margin: 0
+  padding: 0
+
+li
+  margin-bottom: 8px
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+  &:last-child
+    margin: 0px
+
+li:before
+  content: ''
+  display: inline-block
+  height: 6px
+  width: 6px
+  border-radius: 50%
+  background-color: var(--font-black-color)
+  margin: 0 8px 1px 0
 </style>