WIP Сделала колонки

src/pages/newCalendar/components/CalendarColumn.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col
+    .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
+    .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
+      span.text-smm.color-grey 0 записей
+</template>
+
+<script>
+export default {
+  name: "CalendarColumn",
+  props: {
+    date: Object,
+    expandedDisplayType: Boolean,
+  },
+  methods: {
+    transformDayName(name) {
+      return name[0]?.toUpperCase() + name?.slice(1);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  border-right: 1px solid var(--border-light-grey-color)
+  width: 380px
+  &:last-child
+    border-right: none
+
+.header
+  position: sticky
+  z-index: 5
+  background-color: var(--default-white)
+
+.body
+  position: relative
+  z-index: 3
+
+.color-black
+  color: var(--font-dark-blue-color)
+
+.color-grey
+  color: var(--font-grey-color)
+
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
+</style>