56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template lang="pug">
|
|
.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.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,
|
|
},
|
|
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)
|
|
@media(min-height: 1090px)
|
|
border-bottom: 1px solid var(--border-light-grey-color)
|
|
</style>
|