WIP Начала карточку записи

src/pages/newCalendar/components/CalendarColumn.vue

@@ -1,16 +1,19 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col
+  .calendar-column-wrapper.flex.flex-col(ref="columnRef")
     .header.flex.flex-col.items-center.justify-center.top-0.pt-3.pb-10px
       span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
       span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
-    .body.h-full
+    .body.h-full.px-1.py-1
+      calendar-record-card(:column-ref="$refs.columnRef")
     .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
       span.text-smm.color-grey 0 записей
 </template>
 
 <script>
+import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
 export default {
   name: "CalendarColumn",
+  components: { CalendarRecordCard },
   props: {
     date: Object,
     expandedDisplayType: Boolean,

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+  .card-wrapper.w-full.flex.gap-y-2px.flex-col
+    .header.w-full.flex.gap-x-2px.text-sm
+      .first-item.color-black.px-4.flex.items-center.justify-center.font-semibold {{ recordTime }}
+      .color-black.flex.items-center.px-4.flex-1.font-semibold Харитонова О. В.
+      .info-block
+      .last-item.info-block(@click="outputRef")
+    .body.background-grey.flex.pl-4.pr-2.py-10px.color-grey.gap-x-12(:style="bodyHeight", :class="bodyClass")
+      .flex.gap-x-2.items-center
+        q-icon(name="app:phone", size="14px")
+        .text-xxs +7 (910) 424–13–13
+      .flex.gap-x-2.items-center
+        q-icon(name="app:mail", size="14px")
+        .text-xxs Haritonich@mail.ru
+      span.text-xxs.self-end(v-if="servicesCount && Object.keys(bodyClass)?.length") {{`${4} услуги`}}
+</template>
+
+<script>
+import * as moment from "moment/moment";
+export default {
+  name: "CalendarRecordCard",
+  props: {
+    columnRef: Node,
+  },
+  data() {
+    return {
+      pixelsPerHalfHour: 33,
+      start: "2023-06-24T13:00:00Z",
+      end: "2023-06-24T14:30:00Z",
+      servicesCount: 4,
+    };
+  },
+  computed: {
+    startTime() {
+      return moment.parseZone(this.start);
+    },
+    endTime() {
+      return moment.parseZone(this.end);
+    },
+    recordTime() {
+      return (
+        this.startTime?.format("HH:mm") + " – " + this.endTime?.format("HH:mm")
+      );
+    },
+    recordDuration() {
+      if (this.endTime.isAfter(this.startTime))
+        return this.endTime.diff(this.startTime, "minutes");
+      return null;
+    },
+    bodyHeight() {
+      let halfHourCount = parseInt(this.recordDuration / 30, 10) - 1;
+      if (halfHourCount)
+        return {
+          height: `${36 + 40 * (halfHourCount - 1)}px`,
+        };
+      return {
+        display: "none",
+      };
+    },
+    bodyClass() {
+      if (parseInt(this.bodyHeight?.height, 10) >= 76)
+        return {
+          "flex-col": true,
+          "gap-y-2": true,
+        };
+      return {};
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="sass" scoped>
+.header
+  height: 30px
+  & > div
+    background-color: var(--bg-light-grey)
+.first-item
+  border-top-left-radius: 4px
+  border-bottom-left-radius: 4px
+  width: 130px
+.last-item
+  border-top-right-radius: 4px
+  border-bottom-right-radius: 4px
+.background-grey
+  background-color: var(--bg-light-grey)
+.color-black
+  color: var(--font-dark-blue-color)
+.color-grey
+  color: var(--font-dark-blue-color-0)
+.info-block
+  width: 30px
+  height: 30px
+.body
+  border-bottom-left-radius: 4px
+  border-bottom-right-radius: 4px
+</style>