119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
<template lang="pug">
|
||
.calendar-wrapper.bg-white
|
||
.header.px-6.pt-5.pb-18px.flex.items-center.justify-between
|
||
.text-smm.font-semibold {{ month }}
|
||
.arrows.flex.items-center.justify-center.gap-x-6
|
||
q-btn(
|
||
flat,
|
||
size="10px",
|
||
dense,
|
||
icon="arrow_back_ios_new",
|
||
text-color="black",
|
||
round,
|
||
@click="previousMonth"
|
||
)
|
||
q-btn(
|
||
flat,
|
||
icon="arrow_forward_ios",
|
||
size="10px",
|
||
text-color="black",
|
||
dense,
|
||
round,
|
||
@click="nextMonth"
|
||
)
|
||
.week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
|
||
.flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
|
||
.body.pb-6.px-6.grid.grid-rows-6.grid-cols-7.gap-x-1.gap-y-2
|
||
.flex.items-center.justify-center.h-8.w-8.rounded-full(
|
||
v-for="date of dates",
|
||
:style="calculateCurrentMonth(date)",
|
||
:key="date",
|
||
) {{ date.format("DD") }}
|
||
</template>
|
||
|
||
<script>
|
||
import * as moment from "moment/moment";
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
name: "BaseCalendar",
|
||
props: {
|
||
modelValue: Object,
|
||
range: Boolean,
|
||
},
|
||
data() {
|
||
return {
|
||
week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
|
||
currentDate: moment(),
|
||
};
|
||
},
|
||
computed: {
|
||
value: {
|
||
get() {
|
||
return this.modelValue;
|
||
},
|
||
set(value) {
|
||
this.$emit("update:modelValue", value);
|
||
},
|
||
},
|
||
...mapState({
|
||
today: (state) => state.calendar.currentDate,
|
||
}),
|
||
month() {
|
||
let formattedMonth = this.currentDate.format("MMMM");
|
||
return `${
|
||
formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
|
||
} ${this.currentDate.format("YYYY")}`;
|
||
},
|
||
startDate() {
|
||
return this.currentDate
|
||
.clone()
|
||
.startOf("month")
|
||
.startOf("week")
|
||
.subtract(1, "day");
|
||
},
|
||
dates() {
|
||
return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
|
||
},
|
||
},
|
||
methods: {
|
||
previousMonth() {
|
||
this.currentDate = this.currentDate.clone().subtract(1, "month");
|
||
},
|
||
nextMonth() {
|
||
this.currentDate = this.currentDate.clone().add(1, "month");
|
||
},
|
||
calculateCurrentMonth(date) {
|
||
if (
|
||
date.isSame(this.today, "day") ||
|
||
date.isSame(this.currentDate, "day")
|
||
)
|
||
return {
|
||
color: "var(--default-white)",
|
||
"background-color": "var(--btn-blue-color)",
|
||
};
|
||
if (date.isSame(this.currentDate, "month"))
|
||
return {
|
||
color: "var(--font-black-color)",
|
||
};
|
||
return {
|
||
color: "var(--font-grey-color)",
|
||
};
|
||
},
|
||
},
|
||
mounted() {
|
||
if (this.value) this.currentDate = this.value.clone();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="sass">
|
||
.calendar-wrapper
|
||
width: 286px
|
||
.header
|
||
border-bottom: 1px solid var(--border-light-grey-color)
|
||
.week-item
|
||
color: var(--font-grey-color)
|
||
.week-item:nth-last-child(-n+2)
|
||
color: var(--border-red-color)
|
||
</style>
|